chosen.jquery.js

http://baifjece.blog.163.com/blog/static/33794654201286102519119/

——————首次加载设置默认选中项———

给select标签的option 设置selected即可

Chosen—强大的jquery模拟选择框插件

2012-09-06 10:25:19| 分类： JQuery | 标签：chosen jquery 模拟选择 |举报|字号点此查看demo

点此下载

如何使用？

引入jquery库和脚本

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”type=”text/javascript”></script>
<script src=”chosen/chosen.jquery.js” type=”text/javascript”></script>

选择框html片段

<select class=”chzn-select” data-placeholder=”Choose a Country” style=”width:350px;”tabindex=”1″>
<option value=””></option>
<option value=”United States”>United States</option>
<option value=”United Kingdom”>United Kingdom</option>
<option value=”Afghanistan”>Afghanistan</option>
<option value=”Albania”>Albania</option>
…
</select>

初始化组件

$(“.chzn-select”).chosen();

就这么简单。

Chosen使用技巧

如何设置模拟选择框的默认文本？
设置data-placeholder=””，即可。
如果不存在data-placeholder，组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本？

$(“.chzn-select”).chosen({no_results_text: “没有匹配结果”});

如何给选项分组？
在html中增加optgroup标签。

<select data-placeholder=”Your Favorite Football Teams” style=”width:350px;” class=”chzn-select” multiple tabindex=”6″>
<option value=””></option>
<optgroup label=”NFC EAST”>
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
<optgroup>
<optgroup label=”NFC NORTH”>
<option>Chicago Bears</option>
<option>Detroit Lions</option>
<option>Green Bay Packers</option>
<option>Minnesota Vikings</option>
</optgroup>
</select>

如何开启多选支持？
增加个多选属性multiple
<select data-placeholder=”Choose a Country” class=”chzn-select” multiple style=”width:350px;”tabindex=”4″>

<option value=””></option>
<option value=”United States”>United States</option>
<option value=”United Kingdom”>United Kingdom</option>
<option value=”Afghanistan”>Afghanistan</option>
<option value=”Albania”>Albania</option>
<option value=”Algeria”>Algeria</option>
</select>

来源：http://www.36ria.com/4976

模糊查询时，chosen默认从第一个字符搜索，所以写中间的字符搜索时，是搜索不出来的–下面的js中（search_contains属性为true即可）可以让chosen搜索选项的中间及末尾字符

no_results_text是搜索不到内容时，显示的提示语

placeholder_text是下拉选项默认显示的文字

disable_search_threshold是select的option选项大于等于此值，才会显示查询的文本框

jQuery(".chosen").chosen({
no_results_text: "My language message.",
placeholder_text : "My language message.",
search_contains: true,
disable_search_threshold: 10
});