插件地址:https://github.com/harvesthq/chosen/
Demo地址:http://www.aitiblog.com/test/chosen/
使用时,需要先引入jquery,然后再引入chose的js和css
<script type="text/javascript" src="@{'/public/js/chosen/chose.jquery.js'}"></script> <link rel='stylesheet' href='@{'/public/js/chosen/chosen.css'}' type='text/css' media='all'/>
在select的class属性添加chzn-select,定义select的width属性
<option value="">Demo</option>
然后在select元素上启用chose
jQuery("#obj_branch_id").chosen();
如果select中的选项发生变化,例如通过ajax更新了option,可以在ajax的回调函数中更新chose
jQuery("#obj_branch_id").trigger("liszt:updated");
补充常用方法:
<script language="javascript"> $(document).ready(function(){ //华丽初始化 $(".chzn-select").chosen(); //单选select 数据同步 chose_get_ini('#dl_chose'); //change 事件 $('#dl_chose').change(function(){ alert(chose_get_value('#dl_chose') + ' : '+ chose_get_text('#dl_chose')); }); //多选select 数据同步 chose_get_ini('#dl_chose2'); //change 事件 $('#dl_chose2').change(function(){ alert(chose_get_value('#dl_chose2') + ' : '+ chose_get_text('#dl_chose2')); }); }); //select 数据同步 function chose_get_ini(select){ $(select).chosen().change(function(){$(select).trigger("liszt:updated");}); } //单选select 数据初始化 function chose_set_ini(select, value){ $(select).attr('value',value); $(select).trigger("liszt:updated"); } //单选select value获取 function chose_get_value(select){ return $(select).val(); } //select text获取,多选时请注意 function chose_get_text(select){ return $(select+" option:selected").text(); } //多选select 数据初始化 function chose_mult_set_ini(select, values){ var arr = values.split(','); var length = arr.length; var value = ''; for(i=0;i<length;i++){ value = arr[i]; $(select+" [value='"+value+"']").attr('selected','selected'); } $(select).trigger("liszt:updated"); } </script>
动态的设置值:
<option>Brown Bear</option> <option selected="">Giant Panda</option> <option>Sloth Bear</option>
给需要设置值的标签假如 selected="" 属性
遍历并获取选中项的Value值:
$("#pingcezhuti option:selected").each(function () { alert($(this).val()); });
相关推荐
下拉框美化插件chosen
之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件,比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于...
jquery的下拉框支持检索(汉字检索)的chosen插件,引入jquery后直接引入此js可实现
jQuery Bootstrap和chosen集成下拉框插件特效.zip
这是一款Bootstrap和chosen集成jQuery下拉框插件。该插件利用chosen的样式和bootstrap下拉框的功能,集成出新的下拉框效果。该下拉框支持单项选择和多项选择,支持搜索和分组功能。
这个是jquery的下拉框插件,可以实现下拉框内模糊搜索的功能
$('.form-control-chosen').chosen({ allow_single_deselect: true, width: '100%' }); $('.form-control-chosen-required').chosen({ allow_single_deselect: false, width: '100%' }); $('....
一个可以美化下拉框,并且支持模糊查询的下拉框搜索jquery插件 下载地址 https://github.com/harvesthq/chosen/releases 官方文档配置 https://harvesthq.github.io/chosen/options.html 官方文档说明 ...
Chosen:select下拉选择框美化插件及实现模糊搜索,Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它...
chosen jquery带搜索的下拉框简单整理,代码简单,易读,易懂
主要是通过jquery chosen插件,实现select多选的美化效果,该控件使用简单
Jquery select 插件 select
Chosen 是select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。此外,还可以搜索查找下拉选项。它可对列表进行分组,同时也可禁用某些选择项。
select2 搜索下拉框插件 下拉框美化插件chosen的扩展,它能让丑陋的、很长的select选择框变的更好看、更方便,支持搜索,远程数据集,以及无限滚动的结果。
chosen_v1.2.0.zip ...jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能 下载地址:https://github.com/harvesthq/chosen/releases
jquery chosen
jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。 同时我修改了一下英文注释。 修复了中文名称下搜索的BUG。
chosen用于下拉框多选,本资源含有css及js,导入项目中后需要初始化 $(function(){ //下拉框 $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); $(".chzn-...
bootstrap4c-chosen是一款Bootstrap4下拉框功能强化插件。该插件在原生bootstrap4下拉框的基础上,新增了搜索、选项分组、多选等功能,非常实用。