Tengo dos menús desplegables que quiero llenar desde la misma matriz que se pasa a una función como esta

html

 <button onclick="popu(<%= JSON.stringify(coun) %>);">blue</button> <form> <fieldset> <select id="selectNumber" class="selectpicker1" name="selectpicker1"> <option>Choose a number</option> </select> <select id="selectNumber2" class="selectpicker2" name="selectpicker2"> <option>Choose a number</option> </select> <input type="submit" id="submit-form" /> </fieldset>

función popu.js

 function popu(coun) { var select = document.getElementById("selectNumber"); var select2 = document.getElementById("selectNumber2"); for(var i = 0; i < coun.length; i++) { var opt = coun[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); select2.appendChild(el); } }

Pero solo se está llenando un menú desplegable.

Entonces, encontré una respuesta de jquery pero aún no conozco jquery, e hice esto que tampoco funciona

 $(function popu(coll) { var elements = $('[id^="selectNumber"]'); $.each(elements, function(index, value){ var select = document.getElementById(elements[index]); for(var i = 0; i < coun.length; i++) { var opt = coun[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); // select2.appendChild(el); } }); });