欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jquery.chosen 强大的jquery模拟下拉框(select)插件

美国FDC机房 添加于 2012-08-31  
jquery教程

jQuery强大的select模拟插件,效果如下图所示,带搜索功能

jquery.chosen 强大的jquery模拟下拉框(select)插件-图片1
jquery.chosen 强大的jquery模拟下拉框(select)插件-图片1

演示: http://harvesthq.github.com/chosen/
Chosen提供了suggest功能,强大的是实现了选项分组和多选关键词处理。
如何使用?
引入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: "没有匹配结果"});
插件下载地址:
jQuery 版本 1.6.4+ https://github.com/harvesthq/chosen/
jQuery 版本 1.3.2+ https://github.com/goldenclone/chosen

转载自零度科技:http://www.ldisp.com/a/jquery/2012/chosen.shtml

上一篇:jquery iframe父子框架中的元素访问方法
下一篇:jQuery中的线性、渐进、曲线、摆动运动效果插件

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

1350

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理