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