selectivity.js使用:多选模糊插件初始与传值(兼容ie10+)

本文详细介绍Selectivity.js插件的使用方法,包括引入资源、数据类型定义、初始化配置及如何将选择的数据传递到后台。适合希望实现下拉选择框功能的前端开发者阅读。

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

①:https://www.bootcdn.cn/Selectivity.js/

②:引css和js

<link rel="stylesheet" href="css/selectivity-jquery.css"/>

<script src="js/jquery.min.js"></script>

<script src="js/selectivity-jquery.js"></script>

③:数据类型

    var data= [{
            "id":1,
            "text":"111",
        },{
            "id":2,
            "text":"222",
        },{
            "id":3,
            "text":"333",
        },{
            "id":4,
            "text":"444",
        }
    ]

④:初始化

$('XXX').selectivity({

allowClear: true,  

multiple: true,          //是否多选

items: data,             //数据来源

placeholder: '请选择',

});

⑤:传值到后台(根据后台需求)onchange来获取id或者text值

$("XXX").on("change", function(e){

    datas=[];

    $('.selectivity-multiple-selected-item').each(function () {

        datas.push({

        "key": $(this).attr("data-item-id"),

        "label": $(this).text(),

   })

    console.log(datas);

});

直接根据后台需求把datas传到后台就行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值