自动填充选项标记不起作用的javascript

Question

我正在尝试在select - option标记中填充数字。但是我的脚本只在一个选择标记中填充数字

HTML：

 <div class="form_row">
       <label>Week Num</label>
       <select class="form_select1" id="weeknum"></select>
       <b class="bold1">&nbsp TO &nbsp</b>
       <select class="form_select1" id="weeknum1"></select>
 </div>

Javascript：

 <script>
   var select = document.getElementById("weeknum");
   var select1 = document.getElementById("weeknum1");
   for (var i = 52; i >= 1; i--) {
       var option = document.createElement('option');
       option.text = option.value = i;
       select.add(option, 0);
       select1.add(option, 0);
   }
</script>

我如何实现这一目标？

Answer 1

您只能向父节点添加一次元素，因此您需要创建另一个选项元素：

var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
   var option = document.createElement('option');
   option.text = option.value = i;
   var option1 = document.createElement('option');
   option1.text = option1.value = i;
   select.add(option, 0);
   select1.add(option1, 0);
}

这里是JSFIddle。

Answer 2

试试这个......

var option1 = document.createElement('option');
option1.text = option1.value = i;
select.add(option1, 0);
var option2 = document.createElement('option');
option2.text = option2.value = i;
select1.add(option2, 0);

...为每个选择列表创建一个独特的“选项”。创建的元素无法重复使用。

Answer 3

您需要为每个列表创建一个不同的选项元素。给定的DOM元素只能位于DOM中的一个位置。

Answer 4

编辑：我看到它已经回答了......好吧，我的第一个答案:)

试试这个：

var select = document.getElementById("weeknum"); 
var select1 = document.getElementById("weeknum1");

for (var i = 52; i >= 1; i--) {
  var option = document.createElement('option');
  var option1 = document.createElement('option');
  option.text = option.value =  option1.text = option1.value = i;
  select.add(option, 0);
  select1.add(option1, 0);
}