Question

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

任何人都可以帮助我了解问题所在，为什么会出现这种情况？谢谢！

我做了笔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);

}

Answer 2

您需要克隆元素以包含多个元素

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="js-select"></select>

＆＃13;

你也可以像

一样写

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="js-select"></select>

＆＃13;

Answer 3

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

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>，根据documentation当追加的目标是多个元素时，jquery将克隆第一个N-1目标的元素，只需移动最后一个元素：

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

...

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

Answer 4

这是一个简单的解决方案（pen of the solution）：

(i) X(2)*Y(2)  + X(1)*Y(2) + X(2)*Y(1) = [(sum1+sum2)*(sum1+sum2)-(sum1+2*sum3+sum4)]/8

(ii) X(2) + 2*X(3) + X(4) = [sum4+2*sum3-sum2-2*sum1]/24

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

4 个答案: