Я не вижу вариантов в раскрывающемся списке на веб-странице, но вижу их в элементе

Question

У меня есть два раскрывающихся списка с одинаковыми параметрами, и я не вижу вариантов щелчка по второму раскрывающемуся списку на веб-странице, но вижу их в окне элементов. Первый работает нормально, но я не знаю, в чем проблема со вторым. Также параметры берутся из динамического массива. В консоли не отображается ошибка, поэтому я не знаю, что не так. Я бы очень хотел, чтобы кто-то помог мне здесь.

Я посмотрел на другие связанные вопросы, заданные на платформе, но не смог найти подходящий ответ, я попытался удалить переполнение: скрытый, но не повезло.

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

<options> не является тегом HTML.

Вы допустили просто ошибку при вводе, исправьте ее:

var options = document.createElement("OPTION")

Answer 2

У вас есть опечатка для: 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>