layui 使用 js 动态获取 select 表单

631 阅读1分钟

最近想实现使用 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. 网上还看到一个例子,贴一下,仅供参考

www.luofenming.com/show.aspx?i…

<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设置