HTML Form 表单里的各种组件，例如文本输入框，textarea，按钮等，都可以通过CSS或其它技术进行美化，让它们看起来很漂亮了，唯独下拉列表选项框(select box),不管你怎么做，它摆在那里总显得格格不入。

不过这种情况可能是一去不复返了，如果你猜测是使用HTML5技术， 那就错了，在中国，使用IE6浏览器的人仍占绝大大多数，这种古老的浏览器是不认识HTML5的。

我现在推荐的是一款JavaScript插件，它有Jquery和Prototype两种版本，支持所有类型的浏览器。使用它后，你的页面上的select选择框会变的漂亮的让你大吃一惊，下面是使用前和使用后的对比效果图。

单选模式：

多选模式：

更多的效果请访问这个插件的官方主页的中文翻译Chosen演示页面。

具体的用法非常简单，你只需要在select是加入class=”chzn-select”属性就行了，然后调用 jquery： $(“.chzn-select”).chosen()，一切都搞定。

更多参考：http://www.oschina.net/news/20528/jquery-chosen-plugin

设置选中问题：

在使用jquery的chosen()方法前进行操作，然后再进行chosen的方法。这样就能解决自定义选中问题

更多参考：http://chevy.iteye.com/blog/2085989

Chosen：Select 选择框的华丽变身的更多相关文章

  1. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  2. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  3. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  4. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  5. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  6. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  7. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  8. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

  9. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

随机推荐

  1. MIME类型记录

    Content-Disposition: attachment; filename="filename.xls" 提供下载

  2. RAP开发入门-主题更换

    通过配置扩展点修改应用主题    ps:需要提前准备好主题(theme.css)文件   <!-- 注册主题扩展点 -->    <extension          point= ...

  3. Vim 插件管理及安装

    1.先将ubuntu1204的软件源进行更新.sudo apt-get update 2.再在终端中敲如下命令,让程序自动安装,根据网速的好坏安装时间有长有短. wget -qO- https://r ...

  4. 企业级任务调度框架Quartz(8) 线程在Quartz里的意义（2）

    前序:      做为企业里的任务调度框架,出现同一时间点同时运行两个任务,或者两个任务因为开始的执行时间和执行时间的长短,很有可能出现任务并发执行的情况:因为Quartz的实现是采用java编程,那 ...

  5. vc++文本框的编辑

    新建mfc应用程序,单文档,起名Text,先编译一下 首先要创建一个插入符,用CreateSolid 窗口的高度宽度,可以通过GetSystemMetrics()函数获取 视类是覆盖在框架类之上的 创 ...

  6. 如何在CentOS 7中禁止IPv6（转载）

    最近,我的一位朋友问我该如何禁止IPv6.在搜索了一番之后,我找到了下面的方案.下面就是在我的CentOS 7 迷你服务器禁止IPv6的方法. 你可以用两个方法做到这个. 方法 1 编辑文件/etc/ ...

  7. 洛谷P1120 小木棍 ［数据加强版］搜索

    玄学剪支,正好复习一下搜索 感觉搜索题的套路就是先把整体框架打出来,然后再一步一步优化剪枝 1.从maxv到sumv/2枚举长度(想一想,为什么) 2. 开一个桶,从大到小开始枚举 3. 在搜索中,枚 ...

  8. nyoj124-中位数

    中位数 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 一组数据按从小到大的顺序依次排列,处在中间位置的一个数叫做中位数. 比如 1 5 10 11 9  其中位数就是9 ...

  9. Git clone时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    看了好多资料终于搞定了git 中clone命令报错这个问题,废话不多说直接上步骤希望对大家有帮助. 1   删除.ssh文件夹(直接搜索该文件夹)下的known_hosts(手动删除即可,不需要git ...

  10. Java基础学习总结（63）——Java集合总结

    数据结构是以某种形式将数据组织在一起的集合,它不仅存储数据,还支持访问和处理数据的操作.Java提供了几个能有效地组织和操作数据的数据结构,这些数据结构通常称为Java集合框架.在平常的学习开发中,灵 ...