码迷,mamicode.com
首页 > 其他好文 > 详细

Layui 多选

时间:2021-06-15 18:52:43      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:query   charset   dem   click   blank   asi   src   浙江省   dev   

原文:
https://maplemei.gitee.io/xm-select/#/component/install
https://gitee.com/maplemei/xm-select
https://maplemei.gitee.io/xm-select/#/basic/prop



代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>
<body>

    <form class="layui-form" action="">

        <input type="button" id="test1" value="赋值" />
        <input type="button" id="test2" value="更新值" />
        <input type="button" id="test3" value="获取值" />
        <br /><br />

        <div class="layui-form-item">
            <label class="layui-form-label">联动选择框</label>
            <div class="layui-input-inline">
                <select name="quiz1">
                    <option value="">请选择省</option>
                    <option value="浙江">浙江省</option>
                    <option value="你的工号">江西省</option>
                    <option value="你最喜欢的老师">福建省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <div id="demo3" class="xm-select-demo"></div>
            </div>
        </div>
    </form>

    <script src="../layuiadmin/layui/layui.js"></script>
    <script src="https://maplemei.gitee.io/xm-select/xm-select.js"></script>
    <script>

        // https://maplemei.gitee.io/xm-select/#/component/install
        // https://gitee.com/maplemei/xm-select
        // https://maplemei.gitee.io/xm-select/#/basic/prop


        layui.config({
            base: ‘../layuiadmin/‘ //静态资源所在路径
        }).extend({
            index: ‘lib/index‘ //主入口模块
        }).use([‘index‘, ‘contlist‘, ‘table‘], function () {
            var table = layui.table
                , form = layui.form
                , $ = layui.jquery;


            var demo3 = xmSelect.render({
                el: ‘#demo3‘,
                data: [
                    { name: ‘张三‘, value: 1 },
                    { name: ‘李四‘, value: 2 },
                    { name: ‘王五‘, value: 3 },
                ],
                on: function (data) {// 监听值
                    var arr = data.arr;//arr:  当前多选已选中的数据
                    var change = data.change;//change, 此次选择变化的数据,数组
                    var isAdd = data.isAdd;//isAdd, 此次操作是新增还是删除

                    console.log(‘已有: ‘ + arr.length + ‘ 变化: ‘ + change.length + ‘, 状态: ‘ + isAdd)
                    console.log(arr);
                    console.log(change);
                },
            });


            // 赋值
            document.getElementById(‘test1‘).onclick = function () {
                demo3.setValue([
                    { name: ‘张三‘, value: 1 },                    
                ])
            };

            // 更新值
            document.getElementById(‘test2‘).onclick = function () {
                demo3.update({
                    data: [
                        { name: ‘张三1‘, value: 1, selected: true },
                        { name: ‘李四2‘, value: 2, selected: true },
                        { name: ‘王五3‘, value: 3, disabled: true },
                    ]
                })
            };

            // 获取值
            document.getElementById(‘test3‘).onclick = function () {
                var demo3 = xmSelect.get(‘#demo3‘, true);
                console.log(demo3.getValue());
            };


        });
    </script>
</body>
</html>

效果

技术图片

Layui 多选

标签:query   charset   dem   click   blank   asi   src   浙江省   dev   

原文地址:https://www.cnblogs.com/guxingy/p/14885923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!