LayUI使⽤formSelects-v4做复选下拉框
话不多说先上效果
formSelects-v4下载地址
⾸先在页⾯引⼊⼀下formSelects
<link href="../../layuiadmin/jquery/formSelects-v4.css" rel="stylesheet" />
<script src="../../layuiadmin/jquery/formSelects-v4.js"></script>
在select标签上定义
<label class="layui-form-label">查看类型</label>
<div class="layui-input-block" >
<select xm-select="select1" xm-select-show-count="2" name="stype" id="stype" lay-verify="required" lay-filter="xmFilter1"> </select>
</div>
其中xm-select是formSelects辨识select标签的唯⼀标识,在这个属性上需要⾃定义⼀下
获取动态数据绑定到select上
$.ajax({
url:"接⼝",
layui下载
dataType:'json',
data:"参数",
type:'get',
success: function (res){
//拿出res中data数组
var data= res.data;
var keys =[];
//通过循环遍历将数据赋值到temp这个⼆维数组中
for(var i =0; i < data.length; i++){
var temp ={
"name": data[i].value,
"value": data[i].code//这⾥需要注意,value应该不同,否则在下拉框选择数据的时候,选择上的数据回事⼀样的}
keys.push(temp)
}
//由于formSelect需要的arr是[{"name":"shuju1","value":"shuju2"},{....},{...}]这样的格式,所以上⾯这样去处理
formSelects.data("select1","local",{
arr : keys
});
}
参考博客(⼤家也可以看⼀下)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论