在 jquery 中附加选项以选择的麻烦

Troubles appending options to select in jquery

本文关键字：选择 麻烦 选项 jquery      更新时间：2023-09-26

我有一些<select>需要填充来自数组的动态值。 我的代码非常简单，HTML是由一些具有相同类（.js-select）的空HTML <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>，但最后一个仅填充了数组的最后一个值，甚至没有显示"无"选项。

谁能帮助我了解问题出在哪里以及为什么它表现得那样？谢谢！

我在这里做了一支笔

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);
}

正如其他人已经建议的那样，它不起作用的原因是因为你创建了一个元素并不断移动它。在循环内移动元素的创建，例如：

var $select = $(".js-select");
var ioSensors = [1,2,3]; // The data I want to display in the select
for( i=0 ; i<ioSensors.length ; i++ ){
  //also show a leading "None" option
  if(i === 0){ 
    $("<option></option>").attr('value','').text('None').appendTo($select);
  }
  $("<option></option>").attr('value', ioSensors[i]-1).text(ioSensors[i]).appendTo($select);
}

如果你想知道为什么你的代码似乎适用于最后一个旁边的所有<select>，根据文档，当追加的目标有多个元素时，jquery 将为第一个 N-1 个目标克隆元素，然后只移动最后一个元素：

如果以这种方式选择的元素插入到单个元素中在DOM的其他地方的位置，它将被移动到目标（未克隆）：

。

重要提示：但是，如果有多个目标元素，将为每个元素创建插入元素的克隆副本目标，除了最后一个。

您需要克隆元素才能拥有多个元素

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.clone().val('').text('None').appendTo($select);
  }
  $optionTpl.clone().val(ioSensors[i] - 1).text(ioSensors[i]).appendTo($select);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="js-select"></select>

你也可以写同样像

var $select = $(".js-select");
var ioSensors = [1, 2, 3]; // The data I want to display in the select
var $optionTpl = $("<option></option>");
$("<option />", {
  value: '',
  text: 'None'
}).appendTo($select);
ioSensors.forEach(function(item) {
  $("<option />", {
    value: item - 1,
    text: item
  }).appendTo($select);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="js-select"></select>

这是一个简单的解决方案（解决方案的笔）：

var ioSensors = [1,2,3];
$(".js-select").each(function(){
  for(var i=0;i<ioSensors.length;i++) {
    if(i === 0){
      $("<option value='"'">None</option>").appendTo($(this));
    }
    $("<option value='"" + ioSensors[i] + "'">" + ioSensors[i] + "</option>").appendTo($(this));
  }
});
相关文章：