白嫖的html知识 - 怎样在select元素里使用checkbox元素

像这种Excel的下拉勾选框是非常方便的，但是Html只有单独的checkbox和 select, 没有两者结合使用的元素，那要怎么办呢？

最近公司项目上需要用到这个功能，于是我在网上找了一下，结果给我找到了一个不错的方案，主要使用HTML, CSS and JavaScript, 并不需要使用插件, 代码量也不多，并不复杂，直接贴过来，改一改就能使用了，非常合我心意。下面是相关代码，先抄下来，免得以后找不到了。

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>

最后的效果：

 最后附上原文地址：https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option