layui 下拉框内容来自数据库
时间: 2023-06-29 11:16:03 浏览: 129
要实现从数据库中动态获取下拉框的选项,我们需要使用 layui 的 form 模块,以及 Ajax 技术从后台获取数据。以下是一个简单的示例:
HTML 代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select id="city" lay-filter="city">
<option value="">请选择城市</option>
</select>
</div>
</div>
```
JavaScript 代码:
```javascript
layui.use(['form', 'jquery'], function() {
var form = layui.form;
var $ = layui.jquery;
// 从后台获取下拉框选项数据
$.get('/getCityList', function(res) {
if (res.code === 0) {
var cityList = res.data;
var html = '';
cityList.forEach(function(city) {
html += '<option value="' + city.id + '">' + city.name + '</option>';
});
$('#city').html(html);
form.render('select');
} else {
layer.msg(res.msg, {icon: 2, time: 1500});
}
});
});
```
在上述代码中,我们使用了 jQuery 的 Ajax 方法从后台获取城市列表数据,然后遍历数据生成下拉框选项的 HTML 代码,并通过 $('#city').html(html) 方法将其添加到下拉框中。最后,调用 form.render('select') 方法重新渲染下拉框即可。
需要注意的是,在后台接口中,需要返回一个 JSON 格式的数据,其中 code 表示接口调用状态,0 表示成功,1 表示失败;msg 表示接口调用结果提示信息;data 表示接口返回的数据。例如:
```json
{
"code": 0,
"msg": "获取城市列表成功",
"data": [
{"id": 1, "name": "北京"},
{"id": 2, "name": "上海"},
{"id": 3, "name": "广州"},
{"id": 4, "name": "深圳"},
{"id": 5, "name": "杭州"},
{"id": 6, "name": "成都"},
{"id": 7, "name": "武汉"}
]
}
```
其中的数据可以根据实际需求进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)