在layui中使用Xmselect的基礎操作

因為最近一個周在工作的過程中使用到了對於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)