chosen-select:下拉选择框插件不仅让样式更加美观,而且还支持搜索匹配的功能。
1 简单使用
html
<select class="chosen-select" id="choseselect" >
<option>今天</option>
<option>明天</option>
<option>昨天</option>
<option>哈哈</option>
</select>
js
$('#choseselect').chosen({ no_results_text: "没有可匹配的类型", allow_single_deselect:true ,search_contains: true});
2 详细使用
上面仅是简单的使用,它还有一些配置项和方法供我们实际的使用。参考:
3 我遇到的问题
我使用的时候,有一个样式问题,当页面大小调整的时候,插件自动调整的宽度和页面其他元素不一致。像下面这样:
我的解决方法是:给它加了width:”100%!important”参数,就好了,!important是CSS中提高优先级,样式不冲突时不用加。
$('#choseselect').chosen({ width:"100%!important",no_results_text: "没有匹配", allow_single_deselect:true ,search_contains: true});