在layui中使用Xmselect的基础操作

这个元素的使用为在一行中，只能显示一个下拉框，独占一行

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

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

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

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

使渲染的表单不可选中，使用呢disabled：true放入参数列表即可

tips属性，默认的提示效果

var demo1 = xmSelect.render({

el: '#demo1',

tips: '你喜欢什么水果呢?',

data: [

{name: '水果', value: 1},

{name: '蔬菜', value: 2},

{name: '桌子', value: 3},

{name: '北京', value: 4},

]

})

var demo1 = xmSelect.render({

el: '#demo1',

radio: true,

toolbar: {show: true},

data: [

{name: '张三', value: 1},

{name: '李四', value: 2},

{name: '王五', value: 3},

]

})

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

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都是你选中的数据，根据这个数据来实现动态效果

如果不加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)