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

id="formid"，form標籤的這個id可以用jquery方式使用hide()和show()方法來隱藏或者顯示form元素
<div class="layui-form-item">標籤用來包裹div元素，裏邊的div元素是用來使用Xmselect.render方法來渲染出來select下拉框的
<div class="layui-form-label" >標題1</div>這個標籤現實的是下拉框下邊的左邊的提示      效果為
<div class="layui-input-inline"> 表示一個整行可以存在多個下拉框，效果如下
<div class="layui-input-block" >這個元素的使用為在一行中，只能顯示一個下拉框，獨佔一行
<div id="calCuDimen" ></div>在form表單中使用普通div 寫上id，用來使用這個id來操作Xmselect渲染下拉框，data中是你需要渲染的數據，需要時key—value形式，用name-value的方式存放在數組中，把數組
放入data後邊，渲染出來就是數組中的數據

layui 組件 TableSelect_下拉框

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

layui 組件 TableSelect_數據_02

layui 組件 TableSelect_下拉框_03

  2. 簡單説明完畢，接下來介紹一些我在使用中一些Xmslect的操作和參數的使用，比如默認選中 Xmselct網址xm-select (gitee.io)單個選中

    3. layui 組件 TableSelect_下拉框_04

     

  3.  多個選中需要使用initvalue屬性，把需要選中的數據存放在數組中，放在initvalue後邊即可

    4. layui 組件 TableSelect_下拉框_05

     

     

     

  4. 使渲染的表單不可選中，使用呢disabled：true放入參數列表即可
  5. tips屬性，默認的提示效果
var demo1 = xmSelect.render({
    el: '#demo1', 
    tips: '你喜歡什麼水果呢?',
    data: [
        {name: '水果', value: 1},
        {name: '蔬菜', value: 2},
        {name: '桌子', value: 3},
        {name: '北京', value: 4},
    ]
})

layui 組件 TableSelect_數據_06

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

radio屬性，用來表明表單是多選還是單選，

layui 組件 TableSelect_數組_07

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都是你選中的數據，根據這個數據來實現動態效果

  1. 如果不加radio單選參數的話，默認是多選，注意，在XMselect數據中name不能相同，如果相同，會產生所有的下拉選項同時選中和同時不選中，
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)