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

Question

我正在使用chosen.js ，现在遇到一个问题，当我想用ajax动态附加数据时，它不会更新。 根据所选的官方网站 ，您应该使用此：

$('.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来更改或更新或其他任何方式。 Select2更extensible比chosen 。

动态项目创建

轻松将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>