时间戳

首页 > 解决方案 > 我在网页的下拉框中看不到选项，但可以在元素中看到

javascript - 我在网页的下拉框中看不到选项，但可以在元素中看到

问题描述

我有两个具有相同选项的下拉菜单，在网页上单击第二个下拉菜单时看不到选项，但我可以在元素窗口中看到它们。第一个工作正常，但我不知道第二个有什么问题。此外，选项取自动态数组。控制台中没有显示错误，因此我不知道出了什么问题。我真的很想有人在这里帮助我。

我查看了平台上提出的其他相关问题但找不到相关答案，我尝试删除溢出：隐藏但没有运气。

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>

标签： javascriptjqueryhtmlcssajax

解决方案

你有一个错字： 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>

推荐阅读