我在 web 頁面上的下拉框中看不到選項，但可以在元素中看到它

Question

我有兩個具有相同選項的下拉菜單，在網頁上單擊第二個下拉菜單時看不到選項，但我可以在元素 window 中看到它們。 第一個工作正常，但我不知道第二個有什么問題。 此外，選項取自動態數組。 控制台中沒有顯示錯誤，因此我不知道出了什么問題。 我真的很想有人在這里幫助我。

我查看了平台上提出的其他相關問題但找不到相關答案，我嘗試刪除溢出：隱藏但沒有運氣。

 arr = ["Honda", "Suzuki", "Hyundai"]; var select = document.getElementById("Drop1"); for (var i = 0; i < arr.length; i++) { var option = document.createElement("OPTION"), txt = document.createTextNode(arr[i]); option.appendChild(txt); option.setAttribute("value", arr[i]); select.insertBefore(option, select.lastChild); } var select1 = document.getElementById("Drop2"); for (var i = 0; i < arr.length; i++) { var options = document.createElement("OPTIONS"), txt = document.createTextNode(arr[i]); options.appendChild(txt); options.setAttribute("value", arr[i]); select1.insertBefore(options, select1.lastChild); }

 <div class="col-3"> <select id="Drop1" class="mdb-select md-form colorful-select dropdown-dark mx-2" multiple> <option value="" disabled selected>Car Features</option> </select> <label class="mdb-main-label">Car Features</label> </div> <div class="col-3"> <select id="Drop2" class="mdb-select md-form colorful-select dropdown-dark mx-2" multiple> <option value="" disabled selected>Bike Features</option> </select> <label class="mdb-main-label">Bike Features</label> </div>

Answer 1

你有一個錯字： var options = document.createElement("OPTIONS")它應該是var options = document.createElement("OPTION")

 arr = ["Honda", "Suzuki", "Hyundai"]; var select = document.getElementById("Drop1"); for (var i = 0; i < arr.length; i++) { var option = document.createElement("OPTION"), txt = document.createTextNode(arr[i]); option.appendChild(txt); option.setAttribute("value", arr[i]); select.insertBefore(option, select.lastChild); } var select1 = document.getElementById("Drop2"); for (var i = 0; i < arr.length; i++) { var options = document.createElement("OPTION"), txt = document.createTextNode(arr[i]); options.appendChild(txt); options.setAttribute("value", arr[i]); select1.insertBefore(options, select1.lastChild); }

 <div class="col-3"> <select id="Drop1" class="mdb-select md-form colorful-select dropdown-dark mx-2" multiple> <option value="" disabled selected>Car Features</option> </select> <label class="mdb-main-label">Car Features</label> </div> <div class="col-3"> <select id="Drop2" class="mdb-select md-form colorful-select dropdown-dark mx-2" multiple> <option value="" disabled selected>Bike Features</option> </select> <label class="mdb-main-label">Bike Features</label> </div>

Answer 2

<options>不是 HTML 標記。

您只是輸入錯誤，請更正：

var options = document.createElement("OPTION")