网址:
https://hnzzmsf.github.io/example/example_v4.html
1.下载代码:
2.整合layui
3.代码整合:
<link rel="stylesheet" href="/css/formSelects-v4.css" />
<!--角色-->
<div class="layui-form-item">
<label class="layui-form-label">添加角色</label>
<div class="layui-input-inline" style = "width:280px;">
<select name="roleid" xm-select="roleid" id="roleid">
<option value="">请选择</option>
</select>
</div>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: '/layuiadmin/' //静态资源所在路径
}).extend(
{
index: 'lib/index' //主入口模块
},{
formSelects: 'formSelects-v4'
}
).use(['index', 'form','formSelects'], function(){
var $ = layui.$
,form = layui.form ;
var formSelects = layui.formSelects;
form.verify({
name: function(value, item){
var param = {
name: $("#name").val()
}
console.log(param)
var checkResult = "";
$.ajax({
url: "/sysUser/isExist",
type: "GET",
data: param,
async: false,
success: function(result) {
if(result.code==200&&result.data){
checkResult = "该名称已存在";
}
},
error: function() {
}
});
return checkResult;
}
});
//添加角色。
$.ajax({
type: "post",
url: "/sysRole/list",
data: {page: 1, limit: 1000},
success: function (result) {
if (result.code == 200) {// qnId
$.each(result.data, function (i, v) {
var data={};
console.log(i+" : "+v.name);
formSelects.data('roleid', 'local', {
arr: [
{"name": "北京", "value": 1},
{"name": "上海", "value": 2},
{"name": "分组-2", "type": "optgroup"},
{"name": "xsw", "value": 3},
{"name": "xxx", "value": 4},
{"name": "roleid", "value": 5}
]
});
// $("#roleid").append("<option value='" + v.id + "'>" + v.name + "</option>");
});
form.render('select');
}
}
});
//..省略代码若干..
})
</script>
效果: