javascript - 如何使用相同的选项元素填充两个或多个选择

Question

我想使用一个 JavaScript 函数将相同的选项元素添加到多个选择。

<select id="select1" name="select1"></select>
<select id="select2" name="select2"></select>

我想要选择成为:

<select id="select1" name="select1"> 
  <option value="0">Txt1</option>
  <option value="1">Txt2</option>
  <option value="2">Txt3</option>
</select>
<select id="select2" name="select2"> 
  <option value="0">Txt1</option>
  <option value="1">Txt2</option>
  <option value="2">Txt3</option>
</select>

这是用选项填充选择的函数的一部分:

function window_onload(){
  var SpecTxt = new Array("Txt1","Txt2","Txt3");
    for(var i=0; i<SpecTxt.length; i++) {
      var oOption = document.createElement("OPTION");
          oOption.text = SpecTxt[i];
          oOption.value=i;
          select1.add(oOption);  // Option to first SELECT
          select2.add(oOption);  // Option to second SELECT
    }
}

但是我遇到了 Internet Explorer 脚本错误“参数无效”，结果是“select1”中只有第一个选项，而“select2”中没有选项。如果我从 function window_onload() 中删除最后一个字符串 select2.add(oOption);，则不会出现 IE 错误，并且“select1”按必须填写，但是“select2”为空。在 JS 中如何将相同的选项添加到不同的 SELECT 中？

Answer 1

更新

该Demo在IE上不起作用的原因是IE无法识别属性.valueAsNumber .

来自:

var opts = qty.valueAsNumber;

致:

var opts = parseInt(qty.value, 10);

<小时/>

当您在循环中创建选项时:

var oOption = document.createElement("OPTION");

这只是一个 <option>不是两个<option> s。这就是原因:

select1.add(oOption);  // Succeeds
select2.add(oOption);  // Fails

您可以制作 2 <option>每个循环 s:

var oOption1 = document.createElement("OPTION");
var oOption2 = document.createElement("OPTION");

或者尝试cloneNode() 。请参阅下面的演示:

演示

// See HTMLFormControlsCollection
var form = document.forms.ui;
var ui = form.elements;
var qty = ui.qty0;
var s0 = ui.sel0;
var s1 = ui.sel1;

// Declare a counter variable outside of loop
var cnt = 0;

// Add event handler to the change event of the input
qty.onchange = addOpt;

/* Get the value of user input as a number
|| within the for loop...
|| create an <option> tag...
|| add text to it with an incremented offset...
|| add a incremented value to it...
|| then clone it...
|| add original <option> to the first <select>...
|| add duplicate <option> to the second <select>
*/
function addOpt(e) {
  var opts = parseInt(qty.value, 10);
  for (let i = 0; i < opts; i++) {
    var opt = document.createElement('option');
    opt.text = 'Txt' + (cnt + 1);
    opt.value = cnt;
    var dupe = opt.cloneNode(true);
    s0.add(opt);
    s1.add(dupe);
    cnt++;
  }
}

input,
select,
option {
  font: inherit
}

input {
  width: 4ch;
}

<form id='ui'>
  <fieldset>
    <legend>Enter a number in the first form field</legend>
    <input id='qty0' name='qty0' type='number' min='0' max='30'>
    <select id="sel0" name="sel0"></select>
    <select id="sel1" name="sel1"></select>
  </fieldset>
</form>

引用

HTMLFormControlsCollection