Welcome

首页 / 脚本样式 / JavaScript / LayUI扩展xm-select取值和赋值示例

LayUI扩展xm-select取值和赋值示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="/static/lib/layui-v2.9.16/css/layui.css"/>
    <link rel="icon" href="/static/images/favicon.ico">
</head>
<body>
<div class="layui-container">
    <div class="layui-form">
        <div id="xmselbtn" style="width: 300px; margin: 20px;"></div>
        <button type="button" class="layui-btn" id="getval">取值</button>
        <button type="button" class="layui-btn" id="setval">赋值</button>
    </div>
</div>
<script src="/static/lib/jquery/jquery.min.js"></script>
<script src="/static/lib/layui-v2.9.16/layui.js"></script>
<script src="/static/js/lay-config.js"></script>
<script>
    var xmselbtn;
    layui.use(["xmSelect", "layer", "form"], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var xmSelect = layui.xmSelect;
        //渲染多选
        xmselbtn = xmSelect.render({
            el: '#xmselbtn',
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        $(document).on("click", "#setval", function () {
            xmselbtn.setValue([2, 3]);
            console.log("赋值:2,3");
        })
        $(document).on("click", "#getval", function () {
            var result = [];
            var val = xmselbtn.getValue();
            $.each(val, function (idx, item) {
                result.push(item);
            })
            console.log("取值结果:", result);
        })
        form.render();
    })
</script>

</body>
</html>