web layui 单选框下拉的实例

layui下拉框动态加载

最新推荐文章于 2023-12-06 21:18:17 发布

原创最新推荐文章于 2023-12-06 21:18:17 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jquery #ajax #html

layui 单选下拉框 select根据后台数据显示下拉框

<div class="layui-form-item">
     <label class="layui-form-label">群组类别</label>
     <div class="layui-input-block">
         <select name="groupType" id="groupType" lay-verify="required">
             <option value="">请选择</option>
         </select>
     </div>
 </div>

layui.use([‘form’, ‘layer’, ‘layedit’], function () {
$ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var layedit = layui.layedit;
3.页面打开时异步加载数据
$(function () {
$.ajax({
//提交数据的类型 POST GET
type: “GET”,
//提交的网址
url: “/groupType/dictList”,
//提交的数据
//返回数据的格式
datatype: “json”,//“xml”, “html”, “script”, “json”, “jsonp”, “text”.
//成功返回之后调用的函数
success: function (data) {
$.each(data, function (index, item) {
    if(item.id = groupInfo.groupType){
        $(’#groupType’).append('<option value = "'+item.id+'" selected>'+item.name+'</option>');
    } else{
        $(’#groupType’).append(new Option(item.name, item.id));// 下拉菜单里添加元素
    }
});
layui.form.render(“select”);
}, error: function () {
alert(“查询群组类别失败！！！”)
}
});
})