Функция выбора материала не работает для отображения выпадающих списков - PullRequest
Новая
       23

Функция выбора материала не работает для отображения выпадающих списков

0 голосов
/ 31 октября 2019

Я использовал команду materialSelect jquery, чтобы показать выпадающие списки. Я написал это дважды для 2 выпадающих меню, но он показывает их 4 раза. Когда я пишу команду только один раз, один из раскрывающихся списков работает, а другой нет. Может кто-нибудь, пожалуйста, помогите мне понять, что с ним не так. 

$("#drop1").ready(function() {
  $(".mdb-select").materialSelect();
});

$("#drop2").ready(function() {
  $(".mdb-select").materialSelect();
});

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