在使用
Layui 框架开发过程中，若希望实现
下拉框（`
select`）通过
AJAX 动态加载后端返回的数据，可以按照以下步骤进行操作：
### 1. 页面结构定义
首先，在 HTML 页面中定义一个
下拉框元素，确保其 `name` 或 `id` 属性已设置，以便后续通过 JavaScript 操作。例如：
```html
<div class="
layui-form-item">
<label class="
layui-form-label">学校</label>
<div class="
layui-input-block">
<
select name="SchoolId" id="SchoolId" lay-verify="required" lay-filter="SchoolId" lay-search>
<
option value="">请选择学校</
option>
</
select>
</div>
</div>
```
### 2. 引入必要的模块
在 JavaScript 中使用 `
layui.use()` 引入 `form` 和 `jquery` 模块，确保可以使用表单
渲染和
AJAX 请求功能：
```javascript
layui.use(['form', 'jquery'], function () {
var form =
layui.form;
var $ =
layui.jquery;
});
```
### 3. 发起
AJAX 请求
在 `
layui.use()` 中使用 jQuery 的 `$.
ajax()` 方法向后端发起请求，获取数据并
动态填充到
下拉框中：
```javascript
$(function () {
$.
ajax({
url: ctxPath + 'school/
selectAll', // 后端接口地址
type: 'POST',
async: false,
success: function (result) {
if (result.code === 0) {
var list = result.data;
var
options = '<
option value="">请选择学校</
option>';
$.each(list, function (i, item) {
options += '<
option value="' + item.id + '">' + item.name + '</
option>';
});
$('#SchoolId').html(
options);
form.render('
select');
}
}
});
});
```
### 4.
动态渲染与反选
如果需要在页面
加载后对
下拉框进行反选操作（即默认选中某个值），可以通过 `val()` 方法设置值，并再次调用 `form.render()`：
```javascript
$('#SchoolId').val($("#
selectedSchoolId").val()); // 设置默认选中
form.render('
select'); // 重新
渲染下拉框
```
### 5. 注意事项
- **异步请求**：确保
AJAX 请求为同步（`async: false`），避免在数据未返回时执行
渲染操作。
- **
渲染机制**：每次对 `
select` 内容进行修改后，必须调用 `form.render('
select')` 才能生效。
- **错误处理**：在 `success` 回调中加入错误处理逻辑，防止数据异常导致页面崩溃。
### 示例代码
以下为完整示例代码：
```javascript
layui.use(['form', 'jquery'], function () {
var form =
layui.form;
var $ =
layui.jquery;
$(function () {
$.
ajax({
url: ctxPath + 'school/
selectAll',
type: 'POST',
async: false,
success: function (result) {
if (result.code === 0) {
var list = result.data;
var
options = '<
option value="">请选择学校</
option>';
$.each(list, function (i, item) {
options += '<
option value="' + item.id + '">' + item.name + '</
option>';
});
$('#SchoolId').html(
options);
$('#SchoolId').val($("#
selectedSchoolId").val());
form.render('
select');
}
}
});
});
});
```
###
本文介绍如何在layui框架中使用admin.req方法动态获取专业分类列表并填充到下拉菜单。通过AJAX请求从服务器获取数据，利用jQuery和layui.form组件更新下拉选项，并重新渲染表单。
扫一扫
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
