Question

链接到我的小提琴jsFiddle

我正在尝试使用jQuery为select选项构建选项，并将它们添加到2个不同的选项中，这是我的标记和代码：

＆＃13;

var selectValues = [{ "ownerid": " ", "name": " "}, {  "ownerid": 123,  "name":"Tom"}, {  "ownerid": 345,  "name": "Dick"}, {  "ownerid": 888,  "name": "Harry"}];

$.each(selectValues, function(key, value) {
  var myoption = $("<option></option>")
    .attr("value", value.ownerid)
    .text(value.name);

  $('#select1').append(myoption);
  $('#select2').append(myoption);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1"></select>
<label>Select 2</label>
<select id="select2"></select>

＆＃13;

然而＆＃39; myoption＆＃39;只附加到1选择而不是另一个。

问题：如何在不声明相同变量的情况下将其附加到两者？

喝彩！

Answer 1

这是预期的行为，您需要创建.clone()个对象，并将append()创建为第二个元素。

$.each(selectValues, function(key, value) {
    var myoption = $("<option></option>")
        .attr("value", value.ownerid)
        .text(value.name);

    $('#select1').append(myoption);

    //Append cloned object      
    $('#select2').append(myoption.clone());
});

var selectValues = [{ "ownerid": " ", "name": " "}, {  "ownerid": 123,  "name":"Tom"}, {  "ownerid": 345,  "name": "Dick"}, {  "ownerid": 888,  "name": "Harry"}];

$.each(selectValues, function(key, value) {
  var myoption = $("<option></option>")
    .attr("value", value.ownerid)
    .text(value.name);

  $('#select1').append(myoption);
  $('#select2').append(myoption.clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1"></select>
<label>Select 2</label>
<select id="select2"></select>

使用单选择器的另一种方法。

$.each(selectValues, function (key, value) {
    var myoption = $("<option></option>")
        .attr("value", value.ownerid)
        .text(value.name);

    $('#select1, #select2').append(myoption);
});

var selectValues = [{ "ownerid": " ", "name": " "}, {  "ownerid": 123,  "name":"Tom"}, {  "ownerid": 345,  "name": "Dick"}, {  "ownerid": 888,  "name": "Harry"}];

$.each(selectValues, function(key, value) {
  var myoption = $("<option></option>")
    .attr("value", value.ownerid)
    .text(value.name);

  $('#select1, #select2').append(myoption);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1"></select>
<label>Select 2</label>
<select id="select2"></select>

Answer 2

在每个选择列表上使用一个类，并附加到不是id的类。我在选择更改中输入了一个控制台日志，以证明每个选择列表都是可用的，并且在进行选择时与另一个选项列表分开。

var selectValues = [{"ownerid":" ","name":" "},
                    {"ownerid":123,"name":"Tom"},
                    {"ownerid":345,"name":"Dick"},
                    {"ownerid":888,"name":"Harry"}]

$.each(selectValues, function (key, value) {
   var myoption = $("<option></option>")
      .attr("value", value.ownerid)
      .text(value.name);
    $('.selectList').append(myoption);
 });

$('.selectList').on('change',function(){
  console.log($(this).attr('id') + ": " + $(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select1" class="selectList"></select>
<label>Select 2</label>
<select id="select2"  class="selectList"></select>

Answer 3

在这里，我为您制作了完整的现场演示代码： - https://jsfiddle.net/Arsh_kalsi01/z0u8Lhbm/9/。希望它会帮助你:)）

    var selectValues = [{"ownerid":" ","name":" "},{"ownerid":123,"name":"Tom"},{"ownerid":345,"name":"Dick"},{"ownerid":888,"name":"Harry"}];
$.each(selectValues, function (key, value) {           
  $('#select1').append($("<option value='"+value.ownerid+"'>"+value.name+"</option>"));
  $('#select2').append($("<option value='"+value.ownerid+"'>"+value.name+"</option>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label for="select1">Select 1</label>
<select id="select1"></select>
<label for="select1">Select 2</label>
<select id="select2"></select>

Answer 4

正如其他答案所说，您可以使用.clone()。你正在创建一个jQuery对象（它基本上是一个包装好的HTML元素），所以这个对象一次只能放在一个地方。

另一种方法是回退使用标准字符串，然后将其作为播放HTML元素处理（通过浏览器）。

var myoption = "<option value='" + value.ownerid + "'>" + value.name + "</option>";

$('#select1').append(myoption);
$('#select2').append(myoption);

https://jsfiddle.net/daveSalomon/z0u8Lhbm/10/

jQuery - 附加变量时，只增加1个选择

4 个答案: