I can't see the options in my drop down box on web page but can see it in element

Question

I have two dropdowns with the same options and I can't see the options on clicking the second dropdown, on the webpage, but I can see them in the element window. The first one is working fine but I don't know what's the issue with the second one. Also, the options are taken from a dynamic array. There is no error shown in the console thus I don't know what is wrong. I would really like someone to help me here.

I looked at other related questions asked on the platform but couldn't find a relevant answer, I tried deleting overflow: hidden but no luck.

 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

You have a typo for: var options = document.createElement("OPTIONS") it should be 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> is not HTML tag.

You did just a typing mistake, correct it:

var options = document.createElement("OPTION")