Question

我正在尝试使用JavaScript将选项元素附加到select元素，但我无法使其工作。我将代码分成几块并在我想象可能出现错误的地方调用了console.log()，但除了appendChild方法外，一切似乎都运行正常。

我也尝试过：select.add(new option('value1', 'value2')但它无效。

Javascript代码：

var divTo = document.getElementById('selectProduct');
console.log(divTo);
if (whereTo == 'selectProduct'){
    console.log('inside if loop');
    for (i = 0 ; i < 2 ; i++){
        console.log('inside for loop')
        console.log('products[i] = ' +products[i]);
        var addedOption = new Option();
        addedOption.label = products[i];
        console.log("addedOption label = "+addedOption.label);                  
        divTo.appendChild(addedOption);
        console.log("divTo constructor = "+divTo.constructor.name);
        console.log("addedOptionConstructor = "+addedOption.constructor.name);

 // also tried: divTo.options.add(new Option("valor1", "valor2")); instead of appendChild

 // also tried: addedOption.text instead of addedOption.label


    }           
}

控制台记录：

inside if loop
inside for loop
products[i] = Armada Argentina
addedOption label = Armada Argentina
divTo constructor = HTMLSelectElement
addedOptionConstructor = HTMLOptionElement
<select class="selectfield" id="selectProduct" name="product"></select>

有人能帮助我吗？。

PS：我真的很喜欢编程。如果错误很明显，我很抱歉。

Answer 1

您想动态地向option框添加select元素，对吗？

请参阅：jsfiddle

Answer 2

使用此，

 var divTo = document.getElementById('selectProduct');
if (whereTo == 'selectProduct') {
    console.log('inside if loop');
    for (i = 0 ; i < 2 ; i++) {
        var addedOption = document.createElement("option");
        addedOption.text = products[i];
        divTo.add(addedOption);
    }
}

Answer 3

createSelect()通过传递2个相等长度的数组和要追加的目标元素来创建选择和选项。

<强>特征

createSelect(textArray, valueArray, target)

<强>参数

textArray ：字符串数组 - 每个字符串设置为选项的内容 - 长度必须等于valueArray的长度。

valueArray ：字符串数组 - 每个字符串设置为选项的值 - 长度必须等于textArray的长度。

目标：字符串 - 与CSS和jQuery选择器相同的语法。

SNIPPET 1

＆＃13;

var txt = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'];
var val = ['1', '2', '3', '4', '5'];

function createSelect(textArray, valueArray, target) {
  var tgt = document.querySelector(target);
  var sel = document.createElement('select');
  var qty = textArray.length;
  for (let i = 0; i < qty; i++) {
    var opt = document.createElement('option');
    opt.textContent = textArray[i];
    opt.value = valueArray[i];
    sel.appendChild(opt);
  }
  tgt.appendChild(sel);
}

createSelect(txt, val, "body");

＆＃13;

对于onload，将其包装在另一个函数中：

SNIPPET 2

＆＃13;

function init() {

  var txt = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'];
  var val = [1, 2, 3, 4, 5];

  function createSelect(textArray, valueArray, target) {
    var tgt = document.querySelector(target);
    var sel = document.createElement('select');
    var qty = textArray.length;
    for (let i = 0; i < qty; i++) {
      var opt = document.createElement('option');
      opt.textContent = textArray[i];
      opt.value = valueArray[i];
      sel.appendChild(opt);
    }
    tgt.appendChild(sel);
  }

  createSelect(txt, val, "body");
}

window.onload = init;

＆＃13;

JavaScript - 将选项元素附加到不起作用的select元素

3 个答案:

SNIPPET 1

SNIPPET 2