zoukankan      html  css  js  c++  java
  • xmselect动态渲染(单选和多选)

    首先需要下载xm-select.js下面是参考链接,可下载。

    https://gitee.com/maplemei/xm-select

    之后可以直接运行样例:

    样例一:

    <!DOCTYPE html>
    <html>
    <head>
    <title>layui下拉框多选</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="lib/layui/formSelects-v4.css">
    </head>
    <body>
        <div style="padding: 20px; height: 600px;">
            <form class="layui-form" action="">
                <div style=" 300px; display: inline-block; margin-right: 10px;">
                    <select name="city" xm-select="method-value-example1">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </form>
            <button class="layui-btn"
                onclick="on()">ok</button>
        </div>
    </body>
    <script src="lib/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
    <script src="/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var formSelects = layui.formSelects;
    </script>
    <script>
        var we='2'
        formSelects.value('method-value-example1', [we ]);//赋值选中,为option的value值,数组形式,给上海和深圳选中
    </script>
    <script>
    function on(){
        var a=JSON.stringify(formSelects.value('method-value-example1', 'valStr'));//值为2,4(选中为上海,深圳)
        alert(a);
    }
    </script>
    
    </html>

    运行结果:

     

     样例二:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
    
    
    <!-- 引入插件 -->
    <script src="js/xm-select.js" type="text/javascript" charset="utf-8"></script>
    <!-- 渲染页面 -->
    <div id="demo2" class="xm-select-demo"></div>
    
    
    <br/><br/>
    
    <button class="btn" id="name">获取name数组</button>
    
    <pre id="demo2-value"></pre>
    
    <script>
    var demo2 = xmSelect.render({
        el: '#demo2', 
        data: [
            {name: '张三', value: 1},
            {name: '李四', value: 2},
            {name: '王五', value: 3},
        ]
    })
    
    var types = ['name'];
    types.forEach(function(type){
        document.getElementById(type).onclick = function(){
            //获取当前多选选中的值
            var selectArr = demo2.getValue(type);
            alert(type);
            document.getElementById('demo2-value').innerHTML =  JSON.stringify(selectArr, null, 2);
        }
    });
    
    
    </script>
        </body>
    </html>

    运行结果:

     

     

     

     

     用到的另外一些知识点:

     

     

  • 相关阅读:
    Android权限 uses-permission
    Android中的颜色设置
    px 与 dp, sp换算公式?
    如何成为一名黑客?(转)
    uva 1291(dp)
    框架模式 MVC 在Android中的使用
    CCA概述和安装
    机房收费系统合作版(三)——UI思索
    (36)JS运动之使物体向右运动
    二叉查找树的非递归操作
  • 原文地址:https://www.cnblogs.com/dazhi151/p/14426381.html
Copyright © 2011-2022 走看看