jquerychosen插件的使⽤（搜索查询下拉列表，多选）
前⾔：
想要达到下拉框有多选的情况。
过程：
1.因为本次⼯作项⽬使⽤的是surperUI，⽽它则是基于bootstrap框架搭建⽽成的。于是⾃然⽽然的就想到了使⽤bootstrap中的select插件。可是因为不太熟悉该框架的使⽤⽅法，于是看了⼀下使⽤⽅法，就上⼿写代码了。知道最终研究细节时，才发现出现了⼀些问题：
⾸先，不会取到select的value值；其次，不会回显其值。反复考量之后，才决定摒弃这哥熟知的⽅法，⽽选择另外⼀款⽅便好⽤的插件——Jquery chosen。
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.（chosen是⼀个jQuery插件：它会使冗长笨重的选择框变得更加的友好。）
因为它有较多是介绍，以及相对⽐较全⾯的api，所以使⽤起来就相当⽅便。⽐如：
1）在页⾯中只需引⼊相应⽂件即可：
...
<link href="chosen.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.js"></script>
...
2）在html中创建相应的select元素：
...
<select name="cidt" id="cid" class="cid_select" placeholder="请选择">
<option value="1">西安</option>
<option value="">厦门</option>
<option value="3">成都</option>
<option value="4">重庆</option>
<option value="5">南宁</option>
</select>
...
3）然后在script标签中初始化chosen标签：
jQuery(".cid-select").chosen();——————————————————————————————————————————————
4.关于chosen的⼀些设置：
1）当搜索不到的时候，更改默认提⽰语：
//匹配没有结果时的显⽰⽂字
$(".cid-select").chosen({
no_results_text:"没有到",
allow_single_deselect:true
});
2）chosen监听的事件：
a.chosen:update  通过js改变select元素选项时应该触发此事件，以更新chosen⽣成的选框；
b.chosen:active  相当于HTML 的focus事件（元素获得焦点时候的事件）;
c.chosen:open  激活chosen并显⽰搜索的结果。
***（在对chosen的下拉框做数据初始化或者通过js给下拉框插⼊option之后都需要更新chosen）
//通过在 <select> 元素上触发特定事件可以调⽤ Chosen 的监听函数。
// tell Chosen that a select has changed
$('.cid-select').trigger('chosen:updated');
4）chosen触发的事件：
jQuery('.cid-select).on('change',function(e,params){
do_something(e,params);
});
change    chosen触发标准的change事件，同时会传递selected  or  deselected参数，⽅便⽤户获取改变的选项；
chosen:ready  chosen实例化完成时的触发；
chosen:maxselected  超过max_selected_options设置时触发；
chosen:showing_dropdown  chosen下拉选框打开完成时触发；
chosen:hiding_dropdown chosen下拉选框关闭完成时触发;
chosen:no_results  搜索没有匹配时触发
------------------------------------------------------------------------------------------
5.远程加载数据数据（例）：
jQuery.ajax({
url: '/information/information/citiesall',//这个url⽤来获取所有数据l
dataType: "json",
var html ='';
success: function (data) {
jQuery(".cid-select").chosen({maxHeight: 200});
for (var i = 0; i < data.length; i++) {
html+='<option value="'+result[i].id+'">'+result[i].name+'</option>'自动数字数的软件
}
jQuery(".cid_select").append(html);
}
});
6.chosen jQuery在表单提交的时候，会默认将value提交到后台，这样就⽅便我们进⾏后续的操作了，但是它本⾝⼜存在⼀个不完美的地⽅：在⾃⼰成功在数据库保存好数据后，再回显的时候，却不知道应该怎样给它来赋值。于是想了很多类似的插件：easyui的赋值⽅式或者类似于input的赋值，但是均以失败告终，⽆奈之下，我们只能⾃⼰写⽅法来给它定义赋值的⽅法，暂且就当做公共⽅法使⽤，这样基本上⽤到的⼈都能感受到它的便利。以下便是进⾏封装过的插件，如果再单页⾯中使⽤的话，只需要把它代⼊具体的js中即可。
//到多选标签的对象
chosenSetValues($modal.find('select[name="' + name + '"]'),row[name],option.select_chosen)
//----------------------------------------------
speingmvc防止攻击/**
* chosen多选框
* @param $elm
* @param row
* @param option
*/
var chosenSetValues=($elm,datas,option={})=>{
option=$.extend({},{width: '370px', no_results_text:'⽆结果匹配！'},option);
var url=$elm.attr('data_url')||option.url;
if(url){
$.post(url, (result)=> {
_chosenSetValues($elm,result,datas,option)
},'json');
}else{
var tempArr=[];
$elm.children('option').each(function () {
tempArr.push({id:$(this).attr('value'),name:$(this).text()})
});
_chosenSetValues($elm,tempArr,datas,option)
}
};
var _chosenSetValues =($elm,result,datas,option)=>{
var html='';navicat万能激活码
var flag=false;
$pty();
$elm.chosen("destroy");
if(typeof datas ==='string'){
if(datas.length==0){
datas=[];
}else{
datas =datas.split(',');
}
}
for(var i=0;i<result.length;i++){
for(var j=0;j<datas.length;j++){
if(datas[j]==result[i].id) flag=true;
}
if(flag){
html+="<option value="+result[i].id+" selected >"+result[i].name+"</option>";
flag=false;
}else{
html+="<option value="+result[i].id+">"+result[i].name+"</option>"
}
}
$elm.append(html);
//设置未到时的显⽰⽂字
$elm.chosen(option);
};
***：这⾥，特别提出的⼀点是：在给下拉框赋值的过程中，
$pty();
$elm.chosen("destroy");
第⼀种是原⽣的清空select，第⼆种则是chosen⾃带的清空，只有这两种合在⼀起，才会达到清空原有下拉框值的效果。之前在⽹上看过很多关于chosen的介绍，关于如何清空下拉框的介绍时，总是⽋缺那么⼀点完美，直到⾃⼰开始做的时候，才发现原来这真的有点⼩纠结，不过还好，最终还是达到了预期的效果。
⼀、Chosen 选项列表
通过参数传递的选项
以下参数在实例化的时候通过参数设置。
$('.my_select_box').chosen({
disable_search_threshold: 10, no_results_text: 'Oops, nothing found!', width: '95%' });
选项默认值描述
allow_single_deselect false设置为 true 时⾮必选的单选框会显⽰清除选中项图标
disable_search false设置为 true 隐藏单选框的搜索框
disable_search_threshold0少于 n 项时隐藏搜索框
jquery下载文件插件enable_split_word_search true是否开启分词搜索，默认开启
inherit_select_classes false是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 cla
ss 添加到容器上max_selected_options Infinity最多选择项数，达到最⼤限制时会触发 chosen:maxselected 事件
no_results_text "No results
match"
没有搜索到匹配项时显⽰的⽂字
placeholder_text_multiple "Select Some
Options"
多选框没有选中项时显⽰的占位⽂字
placeholder_text_single "Select an
Option"
单选框没有选中项时显⽰的占位⽂字
search_contains false搜素包含项，默认从第⼀个字符开始匹配
check约束通过限制可放入
single_backstroke_delete true 多选框中使⽤退格键删除选中项⽬，如果设为 false，第⼀次按 delete/backspace 会⾼亮最好⼀个选中项⽬，再按会删除该项
width Original select
width.
Chosen ⽣成的选择框宽度，默认为和原 select 宽度保持⼀致display_disabled_options true是否显⽰禁⽌选择的项⽬
display_selected_options true多选框是否在下拉列表中显⽰已经选中的项
⼆、属性
可以通过在<select>上设置属性传递给 Chosen。
<select class="my_select_box" data-placeholder="Select Your Options"> <option value="1">Option 1</option> <option value="2" selected>Option 2</option> <option value="3" disabled>Option 3</option> </select>
属性描述
data-placeholder 占位符⽂字
注意：改属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。
multiple有此属性的 select 会渲染成可以多选的 Chosen 选框
selected, disabled设置选中、禁⽌状态，Chosen 会读取这些属性
三、触发事件
Chosen 会在源<select>元素上触发事件。
$('.my_select_box').on('change', function(e, params) { do_something(e, params); });
事件描述
change Chosen 触发标准的 change 事件，同时会传递 selected or deselected 参数，⽅便⽤户获取改变的选项chosen:ready Chosen 实例化完成时触发
chosen:maxselected超过 max_selected_options 设置时触发
chosen:showing_dropdown Chosen 下拉选框打开完成时触发
chosen:hiding_dropdown Chosen 下拉选框关闭完成时触发
chosen:no_results搜索没有匹配项时触发
注意：所有 Chosen ⾃定义事件都包含 Chosen 实例chosen对象作为参数。
四、Chosen 监听的事件
通过在<select>元素上触发特定事件可以调⽤ Chosen 的监听函数。
// tell Chosen that a select has changed
$('.my_select_box').trigger('chosen:updated');
validationsummary控件错误显示事件描述
chosen:updated通过 JS 改变 select 元素选项时应该触发此事件，以更新 Chosen ⽣成的选框
chosen:activate相当于 HTML focus 事件
chosen:open激活 Chosen 并显⽰搜索结果
chosen:close关闭 Chosen 并隐藏搜索结果
五、⼏个常规问题及⽤法
1、当js更新select（改变选中项、添加option等）后，执⾏以下操作，⽤来更新chosen选框
$(".chosen-select").trigger("chosen:updated");  //$(".chosen-select")为select元素
2、allow_single_deselect清空选中项不起作⽤
select中必须有⼀个空的option，尤其是动态更新option的情况下，更新前后都要有⼀个空的option，否则不能正常显⽰清空图标
来源：blog.csdn/wangxiuyan0228/article/details/79419937
wwwblogs/zhengyeye/p/6628460.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。