开淦
一、引入
jquery.min.js(插件依赖jq)、chosen.jquery.js、chosen.css(chosen.min.css)
官方下载地址:
chosen:(https://harvesthq.github.io/chosen/)
jq:(下载地址)
别忽略图片了(chosen-sprite.png)就是这个玩意,不想改源码就放在css文件目录下,其实没有它也行 比如你想做一个这种功能,再次点击就会清除该选项,你只需要修改对应的样式宽高设置100%即可
源码在这:
二、初始化
没啥说的 对照官方参数填
<select id="opetype2" class='chosen w-country' data-placeholder='请选择地区' multiple style="outline: none; margin-right: 10px;">
<option value="亳州">亳州</option>
<option value="池州">池州</option>
<option value="滁州">滁州</option>
<option value="黄山">黄山</option>
<option value="芜湖">芜湖</option>
<option value="宣城">宣城</option>
</select>
//js
$(function () {
$('.chosen').chosen({
no_results_text: "没有找到结果!",//搜索无结果时显示的提示
search_contains: true, //关键字模糊搜索。设置为true,只要选项包含搜索词就会显示;设置为false,则要求从选项开头开始匹配
allow_single_deselect: true, //单选下拉框是否允许取消选择。如果允许,选中选项会有一个x号可以删除选项
disable_search: false, //禁用搜索。设置为true,则无法搜索选项。
disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
inherit_select_classes: true, //是否继承原下拉框的样式类,此处设为继承
placeholder_text_single: '选择地区', //单选选择框的默认提示信息,当选项为空时会显示。如果原下拉框设置了data-placeholder,会覆盖这里的值。
width: '168px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度,也会被width覆盖。
max_shown_results: 100, //下拉框最大显示选项数量
display_disabled_options: false,
single_backstroke_delete: false, //false表示按两次删除键才能删除选项,true表示按一次删除键即可删除
case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
group_search: false, //选项组是否可搜。此处搜索不可搜
include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示,true显示。默认false。
});
$('.chosen2').chosen({
search_contains: false,
enable_split_word_search: true //分词搜索,选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
});
});当然参数可以动态的获取并初始化
三、取值
取val值
//取val值
$('#opetype2').on('change', function (e,params) {
params.citys = $("#opetype2").val(); // 得到数组
});
$("#opetype2").chosen().change(function(){
//do something...
});都可以
// e是chosen的实例,params额。没用过
取text
$("#opetype2 option:selected").text()
也许你对得到的数据很头疼 你可以考虑利用正则或者把text原本值后加空格 以便更好切割(阿巴)(阿巴)
四、赋值
赋值请求回来的值
var data = [1,2,3,4]
$("#opetype2").val(data);
$("#opetype2").trigger("chosen:updated");
//改变的optiones的值(就是你的下拉框内容)
五、清空
清空select
$("#opetype2").empty(); //原生清空
$("#opetype2").chosen("destroy");//插件自带
//一起用才完美
可能出现的问题:有时清空不起作用,你可能需要在下拉框中添加一个空的option并习惯放在第一位