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

茅星华
2023-12-01

①: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传到后台就行

 类似资料: