【jquery】Chosen.jquery.js 插件动态加载数据问题

Chosen.jquery.js目前版本v1.6.2，官方文档链接https://harvesthq.github.io/chosen/

插件有一个css文件和一个js文件，都命名为Chosen，引入之后，在自己的js文件中调用.chosen()方法即可。

    
    选项一 
  

说明：如果要显示placeholder里的内容，那第一个选项要为空，value=-1就好了。
写好select之后就在对应的js文件里书写

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

如果要设置参数，可以这么写：

$('.chosen-select').chosen({
    no_results_text: "这是搜索无果的提示信息!",
    disable_search_threshold: 10,//选项小于10时不显示搜索框
    max_selected_options: 5//多选情况下最多能选5个
});

多选时select标签多加一个multiply属性即可。单选时还可以设置其他chosen()方法的参数，这里不详述了。

关于异步动态加载选项数据导致的下拉列表为空的问题

对照文档给出的示例的原html文件和火狐浏览器开发者模式下看到的页面加载后的html文件，就会发现Chosen插件将原select标签隐藏了（display:none），同级多了一个div，这里放了两个ul标签，一个用来放input标签（搜索框），另一个用来把select标签中的options都读过来，写在li中。使用时真正被下拉展示的是这个div里的内容。

我写的时候用$.getJSON(url,[data],[function])这个方法进行调用，function中将获取的data用循环写在select的option中。因为初次使用的关系，以为和AJAX不同，毕竟这里没有看到设置同步还是异步的选项。于是在使用了Chosen插件后出错。能够在开发者模式下查看到html被更改的元素，select虽然隐藏，但其中的option确实填充了。而且两个ul也全部在，只是第二个ul中没有li。

后来用console.log()方法来查看执行顺序，虽然$.getJSON方法我写在js文件头部，$('.chosen-select').chosen()写在文件尾部，但执行时仍然先执行.chosen()前的console.log()方法再执行$.getJSON()的function中的console.log()方法。

我的解决办法是：把$('.chosen-select').chosen()写在$.getJSON()的function中，在填充完option选项之后，调用对应的chosen()方法，此时页面再点击下拉就不会有问题了。

目前我只有这种方法，但如果大家有其他的解决方法，希望能留言告诉我，谢谢。