因为最近一个周在工作的过程中使用到了对于Xmselect的相关功能，工作任务结束，在此总结一下对于Xmselect的使用

在jsp或者html文件中使用layui的方式创建一个form,layui镜像站表单 - 页面元素 - Layui (layuiweb.com)

<div class="layui-form" id="formid" action=""  ">
                    <div style="padding:10px 10px 10px 10px;">
                    <div class="layui-form-item">
                                            
                                <div class="layui-form-label" >标题1</div>
                                    <div class="layui-input-inline">
                                    <input type="text" id="title1" required lay-verify="required" placeholder="标题1描述" autocomplete="off" class="layui-input">   
                                    </div>
                                <div class="layui-form-label" >单位</div>
                                    <div class="layui-input-inline">
                                    <input type="layui-input-inline" id="unit" required lay-verify="required" placeholder="请输入单位" autocomplete="off" class="layui-input">   
                                    </div>
                                <div class="layui-form-label" >标题2</div>
                                    <div class="layui-input-inline" >
                                    <div id="mydimen" width: 195px;></div>  
                                    </div>    
                    </div>                                        
                    <div  class="layui-form-item">
                                    
                                <div class="layui-form-label" >标题3</div>
                                    <div class="layui-input-inline" >                                    
                                        <div id="calCuDimen" ></div>
                                    </div>                               
                    </div>                          
                    <div class="layui-form-item" >
                        <div class="layui-input-block" >
                          <button class="layui-btn" lay-submit id="appPict">确定</button>                        
                        </div>
                    </div>
</div>
                    </div>

1. id="formid"，form标签的这个id可以用jquery方式使用hide()和show()方法来隐藏或者显示form元素

2. <div class="layui-form-item">标签用来包裹div元素，里边的div元素是用来使用Xmselect.render方法来渲染出来select下拉框的

3.  <div class="layui-form-label" >标题1</div>这个标签现实的是下拉框下边的左边的提示      效果为

4. 

    <div class="layui-input-inline"> 表示一个整行可以存在多个下拉框，效果如下

   

    

    

5. <div class="layui-input-block" >这个元素的使用为在一行中，只能显示一个下拉框，独占一行

   

    

    

6.   <div id="calCuDimen" ></div>在form表单中使用普通div 写上id，用来使用这个id来操作Xmselect渲染下拉框，data中是你需要渲染的数据，需要时key—value形式，用name-value的方式存放在数组中，把数组

7. 放入data后边，渲染出来就是数组中的数据

   <script>
   var demo1 = xmSelect.render({
       el: '#demo1', 
       data: [
           {name: '张三', value: 1},
           {name: '李四', value: 2},
           {name: '王五', value: 3},
       ]
   })
   </script>

   

    

    

    

8. 简单说明完毕，接下来介绍一些我在使用中一些Xmslect的操作和参数的使用，比如默认选中 Xmselct网址xm-select (gitee.io)
   单个选中

    

    多个选中需要使用initvalue属性，把需要选中的数据存放在数组中，放在initvalue后边即可

    

    

    

9. 使渲染的表单不可选中，使用呢disabled：true放入参数列表即可
10. tips属性，默认的提示效果

    var demo1 = xmSelect.render({
        el: '#demo1', 
        tips: '你喜欢什么水果呢?',
        data: [
            {name: '水果', value: 1},
            {name: '蔬菜', value: 2},
            {name: '桌子', value: 3},
            {name: '北京', value: 4},
        ]
    })

    

     

     

11. var demo1 = xmSelect.render({
        el: '#demo1', 
        radio: true,
        toolbar: {show: true},
        data: [
            {name: '张三', value: 1},
            {name: '李四', value: 2},
            {name: '王五', value: 3},
        ]
    })

    radio属性，用来表明表单是多选还是单选，

     

     

12. on属性，用来监听下拉框的变化，比如点击之后选择另外的选项，与其他的下拉框进行联动效果，让另外一个下拉框随着你选中的数据变化

    xmSelect.render({
        on: function(data){
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            //change, 此次选择变化的数据,数组
            var change = data.change;
            //isAdd, 此次操作是新增还是删除
            var isAdd = data.isAdd;
            alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)
            //可以return一个数组, 代表想选中的数据
            //return []
        },
    })

    效果，点击之后会alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)弹出框，arr和change都是你选中的数据，根据这个数据来实现动态效果

13. 如果不加radio单选参数的话，默认是多选，注意，在XMselect数据中name不能相同，如果相同，会产生所有的下拉选项同时选中和同时不选中，

14. var demo1 = xmSelect.render({
        el: '#demo1', 
        data: [
            {name: '张三', value: 1},
            {name: '李四', value: 2},
            {name: '王五', value: 3},
        ]
    })

    var condiction = xmSelect.get('#calculateType', true)//

    //#calculateType渲染的div的id属性，condiction是下拉框所有的选项

    对于select的赋值和取值参考xm-select (gitee.io)