layui+ajax-select兩種寫法
阿新 • • 發佈:2019-02-08
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()位置很重要,不然資料出不來