layui+ajax-select两种写法

 

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="departmentId">
            <option value="">请选择类型</option>
        </select>
    </div>
</div>
2、js部分
<script type="text/javascript">
var table,form,element,layedit,layer,laydate; 
$(function() {
    layui.use(['table','form', 'element', 'layedit','layer','laydate'], function(){

            table= layui.table;
            form = layui.form;
            element= layui.element;
            layer = layui.layer
            layedit = layui.layedit

            laydate = layui.laydate; 

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

    })
})

方法①  个人实际应用的方法,没有问题
function findDepartment() {
		$.getJSON('./findDepartment.do', function(res) {
			//此处仅仅是为了演示变化的内容
			var html = "";
			for (var i = 0; i < res.length; i++) {
				html += "<option value=\"" + res[i].name + "\">" + res[i].name + "                </option>"
			}
			$("#departmentId").append(html);
			form.render();
		});
	}

方法②：网上看到的另一种写法，道理一样
function selectRoleName() {
	$.ajax({
		url : "./selectRoleList.do",
		type : "post",
		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，显示出数据
			}
		}
	});
}
</script>

 实际应用中存在的坑特别注意：form.render()位置很重要，不然数据出不来