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>

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

3 个答案: