select 下拉多选

向右看齐 2022-05-18 09:49 390阅读 0赞

一、使用[multiple-select][].js和[multiple-select][] .css实现

HTML代码：

js代码：

$('#checkedLevel').multipleSelect({
        addTitle: true, //鼠标点悬停在下拉框时是否显示被选中的值
        selectAll: false, //是否显示全部复选框，默认显示
        name: "质控级别",
        selectAllText: "选择全部", //选择全部的复选框的text值
        allSelected: "全部", //全部选中后显示的值
        //delimiter: ', ', //多个值直接的间隔符，默认是逗号
        placeholder: "质控级别" //不选择时下拉框显示的内容
    });
    
    //设置默认选中:其中数组中多个值用逗号分隔，值是option的value
     $("#checkedLevel").multipleSelect('setSelects', [1001,1002]);

设置选中后关闭下拉框：  
        $('\#selectJcjb').multipleSelect("close");//其他的方法，可到js中去查看方法名，根据实际情况进行调用。

参照网址：[http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh\_CN\#with-optgroups1][http_wenzhixin.net.cn_p_multiple-select_docs_index.html_locale_zh_CN_with-optgroups1]

[https://www.jqueryscript.net/form/jQuery-Plugin-For-Selecting-Multiple-Elements-Multiple-Select.html][https_www.jqueryscript.net_form_jQuery-Plugin-For-Selecting-Multiple-Elements-Multiple-Select.html]

提示：也可以使用bootstrap.multiselect实现，参照网址：[http://davidstutz.de/bootstrap-multiselect/][http_davidstutz.de_bootstrap-multiselect]

[multiple-select]: https://github.com/wenzhixin/multiple-select
[http_wenzhixin.net.cn_p_multiple-select_docs_index.html_locale_zh_CN_with-optgroups1]: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN#with-optgroups1
[https_www.jqueryscript.net_form_jQuery-Plugin-For-Selecting-Multiple-Elements-Multiple-Select.html]: https://www.jqueryscript.net/form/jQuery-Plugin-For-Selecting-Multiple-Elements-Multiple-Select.html
[http_davidstutz.de_bootstrap-multiselect]: http://davidstutz.de/bootstrap-multiselect/