强大的jquery模拟选择框插件Chosen实现了选项分组免费下载

【资源属性】:
资源名称:强大的jquery模拟选择框插件Chosen实现了选项分组
资源大小:39KB
资源类别: js框架jQuery
更新时间:2023-02-25
资源语言:简体中文
授权方式:免费下载
使用平台:Windows/Linux/Mac
下载地址:下载地址

资源介绍:
很久没写jquery相关的内容了。今天明河向大家推荐个相当不错的模拟选择框插件:Chosen。Chosen提供了suggest功能,强大的是实现了选项分组和多选关键词处理。 

如何使用?
引入jquery库和脚本
[code]
<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>
[/code]
选择框html片段
[code]
<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>
[/code]
初始化组件
[code]
$(".chzn-select").chosen();
[/code]
就这么简单。
Chosen使用技巧
如何设置模拟选择框的默认文本?
设置data-placeholder=”",即可。
如果不存在data-placeholder,组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本?
[code]
$(".chzn-select").chosen({no_results_text: "没有匹配结果"});
[/code]
如何给选项分组?
在html中增加optgroup标签。
[code]
<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>
[/code]
如何开启多选支持?
增加个多选属性multiple
[code]
<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>
[/code]

资源标签: jquery 模拟 选择框