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

Question

I am trying to add select2 options at last of select box every time, When I am choosing a new option from select2 options Its adding sometimes 1st position, sometimes last or middle of others options.

Like first I selected A. Now I want to select B and I want B after A in box. ie A|B..But Its not happenings all time.

 $('#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

Use 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> 

Hope that helps :)

Answer 2

试试这个，它会起作用

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

Answer 3

Working fiddle .

You should use index of the option 's instead, check the example bellow using the jQuery method .index() .

Hope this helps.

 $('#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>