技术交流 > 前端技术 > 基于Jquery的多选下拉框组件:multiple-select

基于Jquery的多选下拉框组件:multiple-select

依赖的文件:

multiple-select.min.css

jquery-3.5.1.min.js

multiple-select.min.js

multiple-select-zh-CN.min.js(可选)


HTML代码:

<select id="MulSelect" autocomplete="off" style="width: 200px;" multiple="multiple">

        <option value=1>广东省</option>

        <option value=2>河北省</option>

        <option value=3>湖北省</option>

        <option value=4>江苏省</option>

</select>


js代码:

$('#MulSelect').multipleSelect({

         placeholder: "请选择",

         selectAllText: "全选",

         allSelected: "选择全部"

});


注意:如果需要中途改变option的数据,需要调用刷新:

$("#MulSelect").multipleSelect('refresh');


后端如果需要字符串的形式,例如逗号分隔参考:

// 获取select元素的options属性

const options = $.('#select')[0].options

const selectedValueArr = []

for (let i = 0; i < options.length; i++) {

    // 如果该option被选中,则将它的value存入数组

    if (options[i].selected) {

    selectedValueArr.push(options[i].value)

    }

}

// 如果后端需要字符串形式,比如逗号分隔

const selectedValueStr = selectedValueArr.join(',')

// Ajax code here

// ...


初始化默认勾选项时可以参考:

var sceneIdList = "1,2";

sceneIdArr = sceneIdList.split(",");

$('#MulSelect option').each(function (i, content) {

        if ($.inArray($.trim(content.value), sceneIdArr) >= 0) {

                this.selected = true;

        }

});

//加载完勾选项后也要刷新

$("#MulSelect").multipleSelect('refresh');


GitHub开源地址:

https://github.com/wenzhixin/multiple-select



2021-12-01 14:15:26
评论
  • 评论加载中...

评论内容: