layui+ajax-select显示出来

1、看效果

方法一、

1、html部分

<div class="layui-form-item">
        <label class="layui-form-label">选择身份</label>
        <div class="layui-input-block">
        <select name="roleId" lay-verify="required" id="add_role_name">
  <option value="">请选着身份</option>
        </select>
</div>
</div>

2、js部分

var form,layedit,layer,laydate; 

layui.use(['form', 'layedit','layer','laydate'], function(){

            form = layui.form;
            layer = layui.layer
            layedit = layui.layedit

            laydate = layui.laydate; 

            selectRoleName();    // 调用查询方法

})

 

function selectRoleName(){

 $.ajax({

          url:"${ctxPath}/role/selectRoleList",
          type:"GET",
          dataType:"json",
          success:function(result){
                 var list = result.extend.roleList;    //返回的数据
                 var role = document.getElementById("add_role_name");        //add_role_name给select定义的id
                 for(var i=0;i<list.length;i++){
                            var option = document.createElement("option");    // 创建添加option属性
                            option.setAttribute("value",list[i].roleId);                  // 给option的value添加值
                            option.innerText=list[i].roleName;             // 打印option对应的纯文本 （超级管理员、管理员）
                            role.appendChild(option);                          // 给select 添加option子标签
                  }

                  form.render("select");                                // 刷性select，显示出数据
          }
    });

}

 

方法二、

new Option(item.askleaveType,item.askleavetypeID,true,true)  后两位设置为true即可，后面两个true分别表示默认被选中和有效

<div class="layui-inline" id="askleavetypeId_div">
    <label class="layui-form-label" style="color:#F00">请假类别</label>
    <div class="layui-input-block">
        <select name="askleavetypeId" id="askleavetypeId" lay-filter="askleavetypeId_aihao">
            <option value="">-请选择-</option>
        </select>
    </div>
</div>




<script>
$.ajax({
        url:'',
        type:'POST',
        dataType:'json',
        success:function (obj) {
            var askleavetypelist = obj.askleavetypelist;
            $.each(askleavetypelist,function (index,item) {
                console.log("---- ",item);
                if ( data.asktypeId == item.askleavetypeID ) {
                    $('#askleavetypeId').append(new Option(item.askleaveType,item.askleavetypeID,true,true));// 下拉菜单里添加元素 默认选中
                } else {
                    $('#askleavetypeId').append(new Option(item.askleaveType,item.askleavetypeID));// 下拉菜单里添加元素
                }
            });
            form.render("select");
        }
    })
</script>