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

时间:2017-12-15 12:53:37

标签: javascript jquery jquery-chosen

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

ajax

我做到了,但它不能与ajax一起使用,但可以使用简单的附加功能。我把这段代码成功了,但看起来这段代码比追加运行得更快。任何想法?

$('.my_select_box').trigger('chosen:updated');
$('.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;
}

1 个答案:

答案 0 :(得分:0)

我建议您使用 Select2 ,因为它支持实时追加(包含ajax),那么您无需使用任何trigger来更改或更新或任何elese。 Select2extensible更多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>