如何在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

Working fiddle。

您应该使用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>