javascript - 如何在选择选项内使用复选框(How to use Checkbox inside Select Option)

Question

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list.(客户给了我一个设计，该设计具有一个“选择选项”菜单，该菜单包含一个复选框以及作为列表中单个项目的项目名称。)

Is there anyway possible to add a checkbox inside a Select Option menu?(无论如何，是否可以在“选择选项”菜单中添加一个复选框？) NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.(注意：开发人员需要添加自己的ID才能使菜单生效，如果可能的话，我仅需要HTML CSS代码。)   ask by Hero Tra translate from so

Answer 1

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript.(您不能在select元素内放置复选框，但是可以使用HTML，CSS和JavaScript获得相同的功能。)

Here is a possible working solution.(这是一个可行的解决方案。) The explanation follows.(解释如下。) Code:(码：) var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } .multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #dadada solid; } #checkboxes label { display: block; } #checkboxes label:hover { background-color: #1e90ff; } <form> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one"> <input type="checkbox" id="one" />First checkbox</label> <label for="two"> <input type="checkbox" id="two" />Second checkbox</label> <label for="three"> <input type="checkbox" id="three" />Third checkbox</label> </div> </div> </form> Explanation:(说明：) At first we create a select element that shows text "Select an option", and empty element that covers (overlaps) the select element ( <div class="overSelect"> ).(首先，我们创建一个显示文本“选择选项”的选择元素，并创建一个覆盖（重叠）选择元素的空元素（ <div class="overSelect"> ）。) We do not want the user to click on the select element - it would show an empty options.(我们不希望用户单击select元素-它会显示一个空选项。) To overlap the element with other element we use CSS position property with value relative |(为了使元素与其他元素重叠，我们使用CSS位置属性，其值的相对|) absolute.(绝对。) To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element ( <div class="selectBox" onclick="showCheckboxes()"> ).(要添加功能，我们指定一个JavaScript函数，当用户单击包含我们的select元素的<div class="selectBox" onclick="showCheckboxes()"> （ <div class="selectBox" onclick="showCheckboxes()"> ）时，将调用该JavaScript函数。) We also create div that contains our checkboxes and style it using CSS.(我们还将创建包含复选框的div并使用CSS对其进行样式设置。) The above mentioned JavaScript function just changes <div id="checkboxes"> value of CSS display property from "none" to "block" and vice versa.(上面提到的JavaScript函数只是将CSS显示属性的<div id="checkboxes">值从“ none”更改为“ block”，反之亦然。) The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.(该解决方案已在以下浏览器中进行了测试：Internet Explorer 10，Firefox 34，Chrome39。浏览器需要启用JavaScript。) More information:(更多信息：) CSS positioning(CSS定位) How to overlay one div over another div(如何将一个div覆盖在另一个div上) http://www.w3schools.com/css/css_positioning.asp(http://www.w3schools.com/css/css_positioning.asp) CSS display property(CSS显示属性) http://www.w3schools.com/cssref/pr_class_display.asp(http://www.w3schools.com/cssref/pr_class_display.asp)