如何在select2框的最后添加新选项？

Question

我试图在每次选择框的最后添加select2选项，当我从select2选项中选择一个新选项时，它有时添加第一个位置，有时是其他选项的最后或中间。

就像我第一次选择A.现在我想选择B，我希望B在A之后的框中。 即A | B ..但它一直没有发生过。

 $('#destination').select2({allowClose: true}); 

 .select2-container { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/> <script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script> <select id="destination" class="destination form-control" multiple="multiple"> <option value="kol">kolkata</option> <option value="ban">Bangalore</option> <option value="del">Delhi</option> </select> 

Answer 1

使用append 。

 $("#add_option_b").on("click", function() { $("#select_id").append("<option value='B'>B</option>") }); $("#add_option_c").on("click", function() { $("#select_id").append("<option value='C'>C</option>") }); $("#add_option_d").on("click", function() { $("#select_id").append("<option value='D'>D</option>") }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <select id="select_id"> <option value"A">A</select> </select> <br /> <br /> <button id="add_option_b">Add option B</button> <br /> <br /> <button id="add_option_c">Add option C</button> <br /> <br /> <button id="add_option_d">Add option D</button> 

希望有帮助:)

Answer 2

试试这个，它会起作用

$(element).select2('data').map(function (obj) { return obj.id; })

Answer 3

工作小提琴 。

您应该使用option的索引，请使用jQuery方法.index()检查示例。

希望这可以帮助。

 $('#destination').select2({allowClose: true}); $('#destination').on('change', function(){ var selected_values = [], arr = []; if( $(this).val().length ) { $.each($(this).val(), function(i,v){ arr[ $('[value="'+v+'"]').index() ] = v; }); arr.map(function(x){ selected_values.push(x); }) console.log( selected_values ); } }); 

 .select2-container { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/> <script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script> <select id="destination" class="destination form-control" multiple="multiple"> <option value="kol" >kolkata</option> <option value="ban" >Bangalore</option> <option value="del" >Delhi</option> </select>