在layui中使⽤Xmselect的基础操作
因为最近⼀个周在⼯作的过程中使⽤到了对于Xmselect的相关功能，⼯作任务结束，在此总结⼀下对于Xmselect的使⽤
在jsp或者html⽂件中使⽤layui的⽅式创建⼀个form,layui镜像站
<div class="layui-form" id="formid" action=""  ">
<div >
<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元素是⽤来使⽤der⽅法来渲染出来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 = der({
el: '#demo1',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>
8. 简单说明完毕，接下来介绍⼀些我在使⽤中⼀些Xmslect的操作和参数的使⽤，⽐如默认选中 Xmselct⽹址
单个选中
多个选中需要使⽤initvalue属性，把需要选中的数据存放在数组中，放在initvalue后边即可
9. 使渲染的表单不可选中，使⽤呢disabled：true放⼊参数列表即可
10. tips属性，默认的提⽰效果
var demo1 = der({
el: '#demo1',
tips: '你喜欢什么⽔果呢?',
data: [
{name: '⽔果', value: 1},
{name: '蔬菜', value: 2},
{name: '桌⼦', value: 3},
{name: '北京', value: 4},
]
})
11. var demo1 = der({
el: '#demo1',
radio: true,
toolbar: {show: true},
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
radio属性，⽤来表明表单是多选还是单选，
12. on属性，⽤来监听下拉框的变化，⽐如点击之后选择另外的选项，与其他的下拉框进⾏联动效果，让另外⼀个下拉框随着你选中的数据变化
on: function(data){
//arr:  当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据，数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;
alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)
jquery是什么有什么作用//可以return⼀个数组, 代表想选中的数据
//return []
},
})
效果，点击之后会alert('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd)弹出框，arr和change都是你选中的数据，根据这个数据来实现动态效果
13. 如果不加radio单选参数的话，默认是多选，注意，在XMselect数据中name不能相同，如果相同，会产⽣所有的下拉选项同时选中和同时不选中，
14. var demo1 = der({
el: '#demo1',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
var condiction = ('#calculateType', true)//
//#calculateType渲染的div的id属性，condiction是下拉框所有的选项
对于select的赋值和取值参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。