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>

运行结果:

 

 

 

 

 用到的另外一些知识点:

 

 

原文地址:https://www.cnblogs.com/dazhi151/p/14426381.html