javascript - 在 jquery 中附加要选择的选项时遇到问题

Question

我有一些 <select>需要用来自数组的动态值填充。我的代码很简单，HTML 是由一些空的 HTML 组成的 <select>与同一个类(class)(.js-select)。

JS 很简单:

var $select = $(".js-select");
var ioSensors = [1,2,3]; // The data I want to display in the select
var $optionTpl = $("<option></option>");

for( i=0 ; i<ioSensors.length ; i++ ){
  //also show a leading "None" option
  if(i === 0){ 
    $optionTpl.attr('value','').text('None').appendTo($select);
  }

  $optionTpl.attr('value', ioSensors[i]-1).text(ioSensors[i]).appendTo($select);
}

有了这段代码，我就有了所有的 <select>正确更新，但最后一个仅填充数组的最后一个值，甚至不显示“无”选项。

任何人都可以帮助我了解问题出在哪里以及为什么会这样吗？谢谢!

我做了一支笔 Here

Answer 1

var $optionTpl = $("<option></option>");创建一个元素一次，然后在循环中您只需继续移动同一个元素并为其赋予一个新值。

改为在循环内创建多个元素

var $select = $(".js-select");
var ioSensors = [1,2,3];

for( var i = 0; i < ioSensors.length; i++ ){

    var $optionTpl = $("<option></option>");

    if(i === 0){ 
        $optionTpl.val('').text('None').appendTo($select);
    } 

    $optionTpl.val(ioSensors[i]-1).text(ioSensors[i]).appendTo($select);

}