1. 程式人生 > >layui+ajax-select兩種寫法

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()位置很重要,不然資料出不來