举一个 layui 动态绑定下拉框的例子,数据是保存在mysql数据库中的
时间: 2024-03-09 20:44:35 浏览: 46
好的,这里给出一个 layui 动态绑定下拉框的例子,数据是保存在 MySQL 数据库中的。
首先需要先创建一个包含省份、城市数据的数据库表。例如,我们可以创建一个名为 "region" 的表,包含以下字段:
- id:主键,自增长。
- name:省份或城市名称。
- parent_id:上级行政区划的 id,如果该行政区划为省份,则 parent_id 为 0。
然后,我们可以使用 PHP 后端语言编写接口,从数据库中查询数据,并返回 JSON 格式的数据,供前端 layui 调用。
PHP 代码:
```php
// 连接数据库
$conn = mysqli_connect("localhost", "username", "password", "database");
// 查询所有省份
$sql = "SELECT * FROM region WHERE parent_id = 0";
$result = mysqli_query($conn, $sql);
$provinces = array();
while ($row = mysqli_fetch_assoc($result)) {
$provinces[] = $row;
}
// 查询指定省份的所有城市
$provinceId = $_GET["provinceId"];
$sql = "SELECT * FROM region WHERE parent_id = $provinceId";
$result = mysqli_query($conn, $sql);
$cities = array();
while ($row = mysqli_fetch_assoc($result)) {
$cities[] = $row;
}
// 构造返回数据
$data = array(
"provinces" => $provinces,
"cities" => $cities
);
// 返回 JSON 格式的数据
header("Content-Type: application/json");
echo json_encode($data);
```
在前端 layui 代码中,我们需要监听省份下拉框的变化事件,当省份下拉框的值发生变化时,我们使用 jQuery 的 ajax 方法调用 PHP 接口,动态获取对应的城市数据,并更新城市下拉框的选项。
HTML 代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-block">
<select name="province" lay-filter="province">
<option value="">请选择省份</option>
<?php foreach ($provinces as $province): ?>
<option value="<?php echo $province["id"]; ?>"><?php echo $province["name"]; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-block">
<select name="city" lay-filter="city">
<option value="">请选择城市</option>
</select>
</div>
</div>
```
JavaScript 代码:
```javascript
// 动态绑定城市下拉框
var citySelect = $('select[name="city"]');
form.on('select(province)', function(data) {
var provinceId = data.value;
if (provinceId) {
$.ajax({
url: '/api/getRegion.php',
data: { provinceId: provinceId },
dataType: 'json',
success: function(data) {
citySelect.empty().append('<option value="">请选择城市</option>');
$.each(data.cities, function(index, city) {
citySelect.append('<option value="' + city.id + '">' + city.name + '</option>');
});
form.render('select');
}
});
} else {
citySelect.empty().append('<option value="">请选择城市</option>');
form.render('select');
}
});
```
在这个例子中,我们使用 PHP 语言编写了一个简单的接口,从 MySQL 数据库中查询省份和城市数据,并返回 JSON 格式的数据。在前端 layui 代码中,我们监听省份下拉框的变化事件,并使用 jQuery 的 ajax 方法调用接口,动态获取对应省份的城市数据,并更新城市下拉框的选项。
相关推荐
![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)