Два значения выпадающего списка из массива с использованием JavaScript

Простой вопрос: я хочу закодировать значения массива в двух раскрывающихся списках в HTML с использованием JavaScript. Но работает только одно выпадающее меню. Если я прокомментирую один, другой будет работать. Я хочу заполнить значения в обоих раскрывающихся списках. Что не так в этом простом коде?

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    select2.appendChild(el);
}

<select id="selectNumber">
    <option>Choose a number</option>
</select>
<select id="selectNumber2">
    <option>Choose a number</option>
</select>

Ответ 1

Не используйте один и тот же элемент для обоих элементов управления. Сначала клонировать

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
  select2.appendChild(el.cloneNode(true));
}

<select id="selectNumber">
  <option>Choose a number</option>
</select>
<select id="selectNumber2">
  <option>Choose a number</option>
</select>

Ответ 2

Создайте элемент option для каждого select, appendChild не клонирует элемент, так что второй append принимает элемент из первого

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
   var el1 = document.createElement("option");
  el1.textContent = opt;
  el1.value = opt;
  select.appendChild(el1);
  select2.appendChild(el);
}

<select id="selectNumber">
  <option>Choose a number</option>
</select>
<select id="selectNumber2">
  <option>Choose a number</option>
</select>

Ответ 3

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2"); 
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    var el2 = document.createElement("option");
    el2.textContent = opt;
    el2.value = opt;
    select2.appendChild(el2);    
}

<select id="selectNumber">
    <option>Choose a number</option>
</select>
<select id="selectNumber2">
    <option>Choose a number</option>
</select>

Ответ 4

Вы можете использовать JavaScript и jQuery:

  var options = ["1", "2", "3", "4", "5"];

    $.each(options, function(key, value) {
        $('#selectNumber,#selectNumber2').append($("<option/>", {
            value: key,
            text: value
        }));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectNumber">
	<option>Choose a number1</option>
</select>
<select id="selectNumber2">
	<option>Choose a number2</option>
</select>

Ответ 5

Вот метод без клонирования (jsFiddle):

var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    select.add(new Option(opt,opt));
    select2.add(new Option(opt,opt));
}

Подробнее о функции add для JavaScript выберите здесь.

Ответ 6

Проблема заключается в том, что создаваемый вами элемент может быть добавлен только одному родителю. Не оба. Ниже приведен фрагмент кода, который работает

var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
  var copy = el.cloneNode(true);
  select2.appendChild(copy);
}

Просто обратите внимание на строку var copy = el.cloneNode(true);, чтобы создать новый клон элемента, а затем добавить его в другой select.