多选文本组件免费素材下载 弱小的jquery模仿抉择框插件Chosen完成了选项分组

很久没写jquery相干的内容了。明天明河向各人保举个相称没有错的模仿抉择框插件：Chosen。Chosen提供了suggest性能，弱小的是完成了选项分组以及多选要害词解决。

若何应用？
引入jquery库以及剧本
[code]
<script src="https://ajax.谷歌apis.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]