jQuery下拉框扩展和美化插件Chosen

Chosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。

先来看下插件的效果：

下面和大家一起看下它的用法。

引入核心文件

1     <link rel="stylesheet" href="docsupport/style.css">
2     <link rel="stylesheet" href="docsupport/prism.css">
3     <link rel="stylesheet" href="chosen.css">
4     <script src="jquery-1.6.min.js" type="text/javascript"></script>
5     <script src="chosen.jquery.js" type="text/javascript"></script>
6     <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

构建html

 1     <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
 2     <option value=""></option>
 3     <option value="United States">United States</option>
 4     <option value="United Kingdom">United Kingdom</option>
 5     <option value="Afghanistan">Afghanistan</option>
 6     <option value="Aland Islands">Aland Islands</option>
 7     <option value="Albania">Albania</option>
 8     <option value="New Caledonia">New Caledonia</option>
 9     <option value="New Zealand">New Zealand</option>
10     <option value="Nicaragua">Nicaragua</option>
11     <option value="Niger">Niger</option>
12     <option value="Nigeria">Nigeria</option>
13     <option value="Niue">Niue</option>
14     <option value="Norfolk Island">Norfolk Island</option>
15     <option value="Northern Mariana Islands">Northern Mariana Islands</option>
16     <option value="Norway">Norway</option>
17     <option value="Oman">Oman</option>
18     <option value="Pakistan">Pakistan</option>
19     <option value="Palau">Palau</option>
20     <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
21     <option value="Panama">Panama</option>
22     <option value="Papua New Guinea">Papua New Guinea</option>
23     <option value="Paraguay">Paraguay</option>
24     <option value="Peru">Peru</option>
25     <option value="Philippines">Philippines</option>
26     <option value="Pitcairn">Pitcairn</option>
27     <option value="Poland">Poland</option>
28     <option value="Portugal">Portugal</option>
29     <option value="Zambia">Zambia</option>
30     <option value="Zimbabwe">Zimbabwe</option>
31     </select>

写入JS，实现下拉美化与筛选功能，这里是默认，没使用参数，更多请参考例子。

$(".chosen-select").chosen();

下载地址：百度云 | 官方下载

时间： 2024-11-07 06:31:40

jQuery下拉框扩展和美化插件Chosen的相关文章

jquery Combo Select 下拉框可选可输入插件

Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行检索过滤,同时支持键盘控制. 支持浏览器: Safari, Chrome, Firefox, Opera iOS, Android, IE Mobile Internet Explorer IE 8 and above 开源地址:http://www.oschina.net/p/combo-sele

JQuery 下拉框左右移动

JQuery下拉框左右移动触发点击按钮时间然后通过$("#one option:selected")获取目标的下拉框所选中的值然后把选中的添加到你所要的下拉框中同时要把原来下拉框的值删除代码可以一句搞定 $("#one option:selected").appendTo("#two") 要注意的是: append()与appendTo()方法的区别. append(content|fn)向每个匹配的元素内部追加内容. append

jquery 下拉框收藏

jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$

jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

自制Jquery下拉框插件

(function ($) { $.fn.select3 = function (option) { var _this = $(this); var isInit = _this.prev('div').hasClass('select3-parent'); if(isInit) return false; var _default = { className: 'select3-parent', //下拉框样式可自定义 width: '300px' }; //默认会根据元素设置的宽度给设置宽

jquery下拉框插件心得

想记录下自己在开发这个下拉框插件之后的心得,发现写一篇博客,真是"知之非艰,行之惟艰".所以再有看到好的文章,就不会再吝啬自己的"赞"了. 多次想该如何写比较好呢?最终决定,将以后我可能用得到的东西一条条记录下来,一条条来写,这样比较清晰. 1.写jquery插件需要的一个结构 // 定义jQuery私有作用域 (function ($) { // 插件默认属性 var defaults = { name1: "value1", name2: &

jQuery 下拉框输入匹配提示选项

做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示 HTML代码 <div style="width: 540px;"> <label class="control-label sr-only" for="search_dchannel_repo"></label> <input class="for

jQuery下拉框

来源:https://www.cnblogs.com/songhaipeng/archive/2012/11/25/2787214.html 本文转载而来 jQuery对下拉框Select操作总结转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#

jquery 下拉框左右选择

html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉框左右选择</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="