multiple-select 多选下拉框

最新推荐文章于 2024-08-08 08:07:27 发布

ly_zszcyx

最新推荐文章于 2024-08-08 08:07:27 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签：多选下拉框

本文链接：https://blog.csdn.net/qq_41722795/article/details/119025382

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 下载源码和文档

git-hub 源码：https://github.com/wenzhixin/multiple-select

参考文档：https://multiple-select.wenzhixin.net.cn/docs/en/options.html

2. 解压找到 dist 文件夹

3. 个人示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/multiple-select.css">

</head>

<body>

    <div>
        <select name='column' multiple="multiple">
            <!-- 　　<option value='1'> 选项一 </option>
            　　<option value='2'> 选项二 </option>
            　　<option value='3'> 选项三</option> -->
            </select>

    </div>

</body>
<script src="../3dLib/jquery-3.4.1.js"></script>
<script src="../3dLib/multiple-select.js"></script>
<!-- <script src="../3dLib/multiple-select.min.js"></script> -->
<script src="../3dLib/multiple-select-locale-all.js"></script>
<script>
    var opts = {};
    var cMultipleSelect = $("select[name='column']").multipleSelect({
        locale: "zh-CN",
        width: 200,
        data: [{ //设置选项
            text: "耕地",
            value: "gd"
        }, {
            text: "林地",
            value: "gd"
        }, {
            text: "断层",
            value: "gd"
        }, {
            text: "硝酸盐地层",
            value: "gd"
        }, {
            text: "地下水层",
            value: "gd"
        }, {
            type: 'optgroup',
            label: 'Group 1',
            children: [{
                text: 'Option 1',
                value: 1
            }, {
                text: 'Option 2',
                value: 2
            }, {
                text: 'Option 3',
                value: 3
            }]
        }],
        　
        placeholder: "请选择",
        /******************事件监听*********************/
        onCheckAll: multiSelCheckAll, //全选
        onUncheckAll: multiSelCheckAll, //取消全选
        onClick: multiSelClick, //点击
        /******************事件监听结束*********************/



    });





    function multiSelCheckAll() {
        debugger;
        var opts = getOptions();
        console.log(this.data);

    }

    function multiSelClick(data) {
        /***************方法调用****************/
        var opts = cMultipleSelect.multipleSelect("getSelects", "text"); //获取方法
        // var opts = cMultipleSelect.multipleSelect("getOptions");
        /***************方法调用结束****************/
        console.log(data);
    }

    function getOptions(data) {
        debugger

    }
</script>

</html>