將選項對象數組添加到多個選擇

我想將選項對象數組添加到兩個選擇標記。但它僅附加到第二個選擇標籤。將選項對象數組添加到多個選擇

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
<select id="select1"></select> 
<select id="select2"></select> 
<script> 
    var options = []; 
    var option1 = new Option("1", "1"); 
    options.push(option1); 
    var option2 = new Option("2", "2"); 
    options.push(option2); 
    var option3 = new Option("3", "3"); 
    options.push(option3); 
    $("#select1").append($(options)); 
    $("#select2").append($(options)); 
</script>

如果我只使用一個select來追加選項，它就起作用。但對於兩個以上它不會。它只附加到最後一個。請幫忙解決此問題...

來源

2014-12-23 suyog patil

您的代碼正在工作。會發生什麼是它首先附加options到#select1然而，因爲它是一個參考變量，然後將相同的選項移動到#select2。

爲了解決這個問題，你需要克隆選項，以使他們的副本添加到第二個選擇：

$("#select1").append($(options)); 
$("#select2").append($(options).clone());

Example fiddle

來源

2014-12-23 11:57:13

或者你可以讓了一步，並創建一個函數填充您選擇的數據類似於：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <select id="select1"></select> 
    <select id="select2"></select> 

    <script> 
     $(function() { 
      var selectData = [{ id: "1", text: "1" }, { id: "2", text: "2" }, { id: "3", text: "3" }]; 

      var bindSelect = function (args) { 
       var data = args.data; 
       var $select = args.select; 

       $select.append(data.map(function (item) { return new Option(item.id, item.text); })); 
      }; 

      $("#select1, #select2").each(function() { 
       bindSelect({ data: selectData, select: $(this) }); 
      }); 

     }); 
    </script> 
</body> 
</html>

來源

2014-12-23 12:21:02 user1514042

將選項對象數組添加到多個選擇

回答

相關問題