chosen插件引入、初始化、取val、取text、赋值

本文介绍了Chosen插件的引入、初始化、取值、赋值及清空操作。首先,需要引入jQuery.min.js、chosen.jquery.js和chosen.css。初始化时,参照官方参数设置。接着,讲解如何获取选中项的val值和text,并提供处理数据的建议。然后,展示了如何给select元素赋值。最后,讨论了如何清空select的选择项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开淦

一、引入

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并习惯放在第一位
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值