layui-下拉框多选取值(完整示例)

小轩爱吃芒果

1798人浏览 · 2025-02-11 16:59:51

小轩爱吃芒果 · 2025-02-11 16:59:51 发布

一.实现页面展示

二.示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取下拉多选值</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="0" http-equiv="Expires"/>
    <link href="../js/dist/layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="../js/dist/layuiadmin/style/admin.css" media="all" rel="stylesheet">
    <style>

    </style>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-form" style="padding-top: 3px">
        <label class="">事件类型</label>
        <div class="layui-input-inline" style="width: 150px;">
            <div class="xm-select" id="event_type"></div>
        </div>
    </div>
    <button onclick="page.moudles.msg()">取值</button>
</div>
</div>

</body>

<script src="../js/jquery.min.js" type="application/javascript"></script>
<script charset="utf-8" src="../js/layuiadmin/layui/layui.js"></script>
<script src="../js/controller.js"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script src="../js/controller.js" type="text/javascript"></script>
<script src="../js/jquery.template.js" type="text/javascript"></script>
<script src="../js/xm-select.js" type="text/javascript"></script>
<script>
    layui.config({
        base: '../js/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        dtree: '{/layui_ext/dtree/dtree}'
    }).use(['index', 'form', 'tree', 'layer', 'xmSelect'], function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$,
            tree = layui.tree,
            colorpicker = layui.colorpicker; //Tab的切换功能，切换事件监听等，需要依赖element模块
        window.page = {
            init_all: function () {
                page.moudles.test()
            },
            moudles: {
                test: function () {
                    var responseData = [
                        {
                            "elmt_uuid": "1_1",
                            "show_name": "医疗信息传递错误事件",
                            "value": "1_1",
                            "element_uuid": "1_1",
                            "sort": 1,
                            "remarks": "1、事件类别*:医疗信息传递错误事件",
                            "group_name": "sjdj",
                            "if_edit": 0,
                            "enabled": 1,
                          //  name:"1_1",     //重命名，被下拉多选识别
                          //  value:"医疗信息传递错误事件",
                        },
                        {
                            "elmt_uuid": "1_2_6_1",
                            "show_name": "Ⅰ级事件",
                            "value": "1_2_6_1",
                            "element_uuid": "1_2_6",
                            "sort": 1,
                            "remarks": "6、不良事件级别:Ⅰ级事件",
                            "group_name": "sjdj",
                            "if_edit": 0,
                            "enabled": 1
                        },
                        {
                            "elmt_uuid": "1_2_6_2",
                            "show_name": "Ⅱ级事件",
                            "value": "1_2_6_2",
                            "element_uuid": "1_2_6",
                            "sort": 2,
                            "remarks": "6、不良事件级别:Ⅱ级事件",
                            "group_name": "sjdj",
                            "if_edit": 0,
                            "enabled": 1
                        },
                        {
                            "elmt_uuid": "1_2_6_3",
                            "show_name": "Ⅲ级事件",
                            "value": "1_2_6_3",
                            "element_uuid": "1_2_6",
                            "sort": 3,
                            "remarks": "6、不良事件级别:Ⅲ级事件",
                            "group_name": "sjdj",
                            "if_edit": 0,
                            "enabled": 1
                        },
                        {
                            "elmt_uuid": "1_2_6_4",
                            "show_name": "Ⅳ级事件",
                            "value": "1_2_6_4",
                            "element_uuid": "1_2_6",
                            "sort": 4,
                            "remarks": "6、不良事件级别:Ⅳ级事件",
                            "group_name": "sjdj",
                            "if_edit": 0,
                            "enabled": 1
                        }
                    ];

                    page.utils.init_xm_select("event_type", responseData, "value", "show_name")
                },
                msg: function () {
                    alert(page.utils.getXmValue("event_type", "value"))
                }
            },
            utils: {

                /**
                 * 初始化多选下拉框
                 * @param domId     html标签id
                 * @param data      数据（数组格式）
                 * @param value_key 用于下拉选项的值的字段名
                 * @param name_key  用于下拉选项显示文本的字段名
                 * @param if_search 是否允许搜索过滤——可搜索的款式（布尔格式）
                 */
                init_xm_select: function (domId, data, value_key, name_key, if_search) {
                    xmSelect.render({
                        el: '#' + domId,
                        filterable: if_search == false ? false : true,
                        tips: '请选择',
                        model: {
                            label: {
                                type: 'block',
                                block: {
                                    //最大显示数量, 0:不限制
                                    showCount: 3,
                                    //是否显示删除图标
                                    showIcon: true,
                                }
                            }
                        },
                        theme: {
                            color: '#0081ff',
                        }, toolbar: {
                            show: true,
                        },
                        height: '150px',
                        direction: 'down',
                        paging: true,//分页
                        pageSize: 6,
                        prop: {//进行转化，将数据字段名换为组件所使用的字段名
                            name: name_key,
                            value: value_key,
                        },
                        data: data
                    });
                },

                /**
                 * 获取下拉多选的值
                 * @param domId         html组件id
                 * @param key           用于取值的字段名（原数据字段名）
                 * @returns {string}    拼接为逗号分隔的字符串
                 */
                getXmValue: function (domId, key) {
                    var list = xmSelect.get("#" + domId)[0].getValue();
                    var result_value = [];
                    for (var i = 0; i < list.length; i++) {
                        var t_list = list[i];
                        var t_value = t_list[key];
                        result_value.push(t_value);
                    }
                    return result_value.join(",");
                },
            },
        }
        //初始化所有  只有一个入口
        page.init_all();
    });


</script>

</html>

三.~~~~~~~~~~~看官留下脚步~如果帮助到你喽帮忙点赞收藏哦~~~~~~~~~~~

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Kubernetes CoreDNS 解析超时排查（ndots 与 NodeLocal DNSCache）

CoreDNS 超时先用 ClusterIP 直连排除数据面，再读 Pod的ndots 与 search。默认 ndots:5 让短名查询放大数倍，AAAA 再乘一倍。指标上区分 NXDOMAIN 瀑布和真正的 SERVFAIL/p99。NodeLocal DNSCache 降 RTT、不消灭放大；根上仍是 FQDN 或谨慎的 dnsConfig。改 DNS 全局配置必须可回滚，禁止先停 Core