HTML JSドロップダウンチェックボックス

Question

初心者ここに
複数のレコードを選択できるドロップダウンを作成しようとしています。
それを行っているか、他の読んだ後、私は以下を思い付いたが..

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>

私は（何も）ドロップを降りSTYLEセクションと作成した3を削除チェックボックスのオプション。 一緒に入れようとしています！

Answer 1

これはあなたが望むものですか？

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 { 
 
    
 
    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>