Chosen.jquery.js目前版本v1.6.2,官方文档链接https://harvesthq.github.io/chosen/
插件有一个css文件和一个js文件,都命名为Chosen,引入之后,在自己的js文件中调用.chosen()方法即可。
<select class="chosen-select" data-placeholder="选择选项" style="width:150px"><option value=-1></option><option value="选项一">选项一</option><!--选项有多少写多少-->
</select>
说明:如果要显示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()方法,此时页面再点击下拉就不会有问题了。
目前我只有这种方法,但如果大家有其他的解决方法,希望能留言告诉我,谢谢。