jquery select 插件 chosen

本文介绍了一个强大的jQuery插件Chosen,它提供了丰富的功能来增强下拉选择框体验,包括搜索、选项分组和多选关键词处理等。通过简单的步骤,可以轻松实现下拉选择框的定制化需求。

jQuery强大的select模拟插件,


带搜索功能 演示: http://harvesthq.github.com/chosen/ 

http://www.aqee.net/docs/Chosen/Chosen.htm

强大的是实现了选项分组和多选关键词处理。


如何使用?
引入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> 
  如果想做缺省选中
  <option value="Albania" selected='selected'>Albania</option> 
                 ...
</select>
初始化组件:$(".chzn-select").chosen();
Chosen使用技巧
如何设置模拟选择框的默认文本?
设置data-placeholder=”",即可。
如果不存在data-placeholder,组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本?

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


IE6,7 支持办法

在chosen.jquery.js 中,ie6和ie7直接返回对象本身: 
if ($.browser.msie && ($.browser.version === "6.0" || ($.browser.version === "7.0" && document.documentMode === 7))) {
return this;
}
  把这段js注释掉,打开ie6和7 测试吧。

注意jquery 支持 ie6,7 的办法。

写到 </body> 之外。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值