HTML JS下拉式複選框

-2

此處初學者
試圖創建一個下拉列表，用戶可以選擇多個記錄。
閱讀如何其他都做到了後，我想出了下面..HTML JS下拉式複選框

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>

當我刪除樣式第一節得到下拉（一無所有），並創造了3複選框選項。試圖把它們放在一起！

來源

2017-09-06 Charlesx54321

'getElementById'不'getElementByID'。 JavaScript是cAsE sEnSiTiVe – j08691

刪除顯示：無，這是阻止在您的代碼也很好 –

@ j08691 - .-謝謝。 – Charlesx54321

這是你想要的嗎？

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>

來源

2017-09-06 20:35:31

是的，將getElementByID變爲Id。多謝你們 -。- – Charlesx54321

HTML JS下拉式複選框

回答

相關問題