选项更新时，selected.js不会更新

Question

我正在使用chosen.js，现在我遇到了一个问题，当我想用​​ajax动态追加数据时，它不会更新。根据所选的official website，你应该使用这个：

$('.my_select_box').trigger('chosen:updated');

我做了，但它不使用ajax，但使用简单的追加。我把这段代码成功了，但看起来这段代码比追加运行得更快。任何的想法？

$('.chosen-select').chosen();

$('#Update').click(function() {

  $.ajax({
    type: "POST",
    dataType: 'json',
    url: 'xxxxx.json',
    success: function(data) {
      $('select').append('<option value="' + data[i]['id'] + '">' + data[i]['title'] + '</li>');
      $('.chosen-select').trigger('chosen:updated'); // update chosen
    }
  });

});

select {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css" />

<select class="chosen-select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<a>Update</a>

Answer 1

我建议你使用Select2因为它支持实时追加（包括ajax）然后你不需要使用任何trigger来更改或更新或任何elese。 Select2比extensible更加chosen。

Dynamic item creation

轻松将chosen转换为select2：

$('.chosen-select').select2({
  placeholder: 'Select an option'
})

例：

$('.chosen-select').select2();
i = 3;
$('#Update').click(function() {
i++;
 $('select').append('<option>'+i+'</li>');

});

select {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />

<select class="chosen-select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<a id="Update">Update</a>