最近想实现使用 layui 的 select 功能,一顿百度找到了两种方式
一是前端 ajax 动态加载
二是后端返回一个json数据,在前端遍历加载
1. 前端 js 使用 ajax 动态加载
html 代码如下:
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">负责人<span style="color:red;">* </span></label>
<div class="layui-input-block" style="margin-right: 50px">
<select name="director" id="directorId" required lay-verify="required" autocomplete="off" lay-search="">
<option value="">直接选择或搜索选择</option>
</select>
</div>
</div>
JavaScript 代码如下:
$.ajax({
url: 'ctyun/getdirectorlist/',
type:"get",
success: function(data) {
if(data.status === "success"){
//给一个默认值(‘请选择’)
var opt = '<option value="" selected=""></option>';
//获取返回的数据
var value = data.data;
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].drt_name + '">' + value[i].drt_name + '</option>'
}
$("#directorId").html(opt);
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
}
}
});
上面的 GET 请求之后的返回数据为(列表里是json格式):
[
{
'drt_name': '王小红',
'drt_phone': '13100008239',
'drt_email': 'admin@123.com',
'drt_description': '',
'drt_createtime': '2021-03-04 18:57:03'
},
{
'drt_name': '李大黄',
'drt_phone': '13100001111',
'drt_email': 'lidahuang@163.com',
'drt_description': '',
'drt_createtime': '2021-03-04 18:57:33'
}
]
效果图:
2. 后端返回一个json数据,在前端遍历加载
django 支持在前端代码中使用迭代数据,nessusscanner.html
页面中的 html 代码:
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" >扫描策略</label>
<div class="layui-input-inline" style="width: 350px">
<select name="systemType" id="policy_id" required lay-verify="required" autocomplete="off" lay-search="">
<option value="">直接选择或搜索选择</option>
{% for item in policylist %}
<option value="{{ item.policy_id }}">{{ item.policy_name }}</option>
{% endfor %}
</select>
</div>
</div>
policylist = [
{
"policy_template_uuid": "ad629e16-03b6-8c1d-cef6-ef8c9dd3c658d24bd260ef5f9e66",
"policy_name": "scan_all",
"policy_id": 4,
"policy_description": None
}, {
"policy_template_uuid": "c3cbcd46-329f-a9ed-1077-554f8c2af33d0d44f09d736969bf",
"policy_name": "scan_web",
"policy_id": 5,
"policy_description": None
}
]
return render(request, 'nessusscanner/nessusscanner.html', {"policylist": policylist})
效果图:
3. 动态 select 下拉选择框赋值
html 代码跟前面的一样
<div class="layui-inline">
<label class="layui-form-label">云类型<span style="color:red;">* </span></label>
<div class="layui-input-inline" style="width: 200px">
<select name="ctyun_yuntype" readonly id="ctyun_yuntypeId" required lay-verify="required" autocomplete="off" lay-search="">
<option value="">直接选择或搜索选择</option>
</select>
</div>
</div>
JavaScript代码:
$.ajax({
url: 'ctyun/getcloudtypelist/',
type:"get",
success: function(data) {
if(data.status === "success"){
//给一个默认值(‘请选择’)
var opt = '<option value="" selected=""></option>';
//获取返回的数据
var value = data.data;
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].cloud_typename + '">' + value[i].cloud_typename + '</option>'
}
$("#ctyun_yuntypeId").html(opt);
$("#ctyun_yuntypeId").val('公有云');//设置选中的值 TypeID为HTML标签ID
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
}
}
});
关键的是这一行,$("#ctyun_yuntypeId").val('公有云');
,但是要在form.render('select');
之前,否则将不加载结果
4. 网上还看到一个例子,贴一下,仅供参考
http://www.luofenming.com/show.aspx?id=ART2020121900001
<script>
layui.use(['form', 'layedit', 'laydate'], function () {
var $ = layui.jquery;
$.ajax({
url: '../api/SysType/GetArticleType?parentId=1',//json文件位置
type: 'get', //请求方式为get
dataType: 'json', //返回数据格式为json
success: function (result) { //请求成功完成后要执行的方法
var select = $("#TypeID");//TypeID为HTML标签ID
$.each(result, function (index, item) {
select.append(new Option( item.TypeName, item.TypeID));// 下拉菜单里添加元素
});
layui.form.render("select");
}
});
});</script>
设置选中值,今天我设置了值但layUI没有显示我选中的值,原因是没有 layui.form.render(“select”);这个没有设置.
$("#TypeID").val("选中的值");//设置选中的值 TypeID为HTML标签ID
layui.form.render("select");//layUI设置