HTML xm-select多選下拉框的使用

HTML代碼：

首先必須引用下載好的xm-select.js文件

    <script src="../js/xm-select.js"></script>

xm-select.js下載地址：https://gitee.com/maplemei/xm-select

 

 下載好直接打開文件包如下圖所示：

之后添加一個div

<div id="demo1" class="xm-select-demo"></div>

JS代碼：

在js中渲染數據以及獲取選中的值：

<script type="text/javascript">

var demo1 = xmSelect.render({
        el: '#demo1',
        data: [
//默認選中使用selected: true
            { name: '全部', value: "0,1,2,3,4", selected: true },        
　　　　　　  { name: '歸一數據', value: 0 },
            { name: '初期對比', value: 1 },
            { name: '歷史對比', value: 2 },
            { name: '井組對比', value: 3 },
            { name: '區塊對比', value: 4 },
        ]
    });


var str=demo1.getValue('valueStr');此時獲取的值為"0,1,2,3,4"默認選中了全部，它的value值為"0,1,2,3,4"

//獲取值的四種方式：
1.demo1.getValue('valueStr') ;//獲取選中值的value字符串
例如："1,2,3"
2.demo1.getValue('value');//獲取選中值的value數組
例如：[1,2,3]
3.demo1.getValue('nameStr');//獲取選中值name的字符串
例如："歸一數據,井組對比,區塊對比"
4.demo1.getValue('name');//獲取選中值的name數組
例如：["初期對比","區塊對比"]

</script>

 

效果展示：

 

 

詳細應用請查閱：https://maplemei.gitee.io/xm-select/#/senior/getValue