以下是一个基于
miniui 的行政区划三级联动
下拉框展示代码，使用了 jQuery 和
miniui 的 ComboBox 组件：
HTML 代码：
```
html
<div class="form-group">
<label for="province">省份：</label>
<input id="province" name="province" class="mini-combobox" data-url="./province.json" style="width: 150px;" />
</div>
<div class="form-group">
<label for="city">城市：</label>
<input id="city" name="city" class="mini-combobox" style="width: 150px;" disabled="disabled" />
</div>
<div class="form-group">
<label for="district">区县：</label>
<input id="district" name="district" class="mini-combobox" style="width: 150px;" disabled="disabled" />
</div>
```
其中，`data-url` 属性指定了获取省份数据的接口地址，这里假设返回的数据格式为 JSON 格式，示例数据如下：
```json
[
{
"id": 1,
"name": "北京市",
"children": [
{
"id": 11,
"name": "市辖区",
"children": [
{
"id": 1101,
"name": "东城区"
},
{
"id": 1102,
"name": "西城区"
},
{
"id": 1103,
"name": "崇文区"
},
{
"id": 1104,
"name": "宣武区"
},
{
"id": 1105,
"name": "朝阳区"
},
{
"id": 1106,
"name": "丰台区"
},
{
"id": 1107,
"name": "石景山区"
},
{
"id": 1108,
"name": "海淀区"
},
{
"id": 1109,
"name": "门头沟区"
},
{
"id": 1111,
"name": "房山区"
},
{
"id": 1112,
"name": "通州区"
},
{
"id": 1113,
"name": "顺义区"
},
{
"id": 1114,
"name": "昌平区"
},
{
"id": 1115,
"name": "大兴区"
},
{
"id": 1116,
"name": "怀柔区"
},
{
"id": 1117,
"name": "平谷区"
}
]
}
]
},
{
"id": 2,
"name": "天津市",
"children": [
{
"id": 21,
"name": "市辖区",
"children": [
{
"id": 1201,
"name": "和平区"
},
{
"id": 1202,
"name": "河东区"
},
{
"id": 1203,
"name": "河西区"
},
{
"id": 1204,
"name": "南开区"
},
{
"id": 1205,
"name": "河北区"
},
{
"id": 1206,
"name": "红桥区"
},
{
"id": 1207,
"name": "塘沽区"
},
{
"id": 1208,
"name": "汉沽区"
},
{
"id": 1209,
"name": "大港区"
},
{
"id": 1210,
"name": "东丽区"
},
{
"id": 1211,
"name": "西青区"
},
{
"id": 1212,
"name": "津南区"
},
{
"id": 1213,
"name": "北辰区"
},
{
"id": 1214,
"name": "武清区"
},
{
"id": 1215,
"name": "宝坻区"
}
]
}
]
}
]
```
JavaScript 代码：
```javascript
$(function() {
// 省份
下拉框
var provinceComboBox = mini.get("province");
provinceComboBox.load(); // 加载数据
// 城市
下拉框
var cityComboBox = mini.get("city");
cityComboBox.setUrl(""); // 初始为空
cityComboBox.setEnabled(false); // 初始禁用
// 区县
下拉框
var districtComboBox = mini.get("district");
districtComboBox.setUrl(""); // 初始为空
districtComboBox.setEnabled(false); // 初始禁用
// 省份
下拉框选中事件
provinceComboBox.on("valuechanged", function() {
var provinceId = provinceComboBox.getValue();
if (provinceId) {
// 加载城市数据
cityComboBox.setUrl("./city.json?provinceId=" + provinceId);
cityComboBox.load();
cityComboBox.setEnabled(true);
} else {
// 禁用城市和区县
下拉框
cityComboBox.setValue("");
cityComboBox.setUrl("");
cityComboBox.setEnabled(false);
districtComboBox.setValue("");
districtComboBox.setUrl("");
districtComboBox.setEnabled(false);
}
});
// 城市
下拉框选中事件
cityComboBox.on("valuechanged", function() {
var cityId = cityComboBox.getValue();
if (cityId) {
// 加载区县数据
districtComboBox.setUrl("./district.json?cityId=" + cityId);
districtComboBox.load();
districtComboBox.setEnabled(true);
} else {
// 禁用区县
下拉框
districtComboBox.setValue("");
districtComboBox.setUrl("");
districtComboBox.setEnabled(false);
}
});
});
```
其中，`provinceComboBox`、`cityComboBox` 和 `districtComboBox` 分别表示省份、城市和区县
下拉框的 ComboBox 组件，通过 `mini.get` 方法获取。在页面加载完成后，省份
下拉框会自动加载省份数据，城市和区县
下拉框初始为空并禁用。
当省份
下拉框选中某个省份时，会根据省份 ID 加载该省份下的城市数据，并将城市
下拉框启用；当城市
下拉框选中某个城市时，会根据城市 ID 加载该城市下的区县数据，并将区县
下拉框启用。如果省份
下拉框没有选中任何省份，则禁用城市和区县
下拉框；如果城市
下拉框没有选中任何城市，则禁用区县
下拉框。
本文探讨了如何在表格或列表中设置允许显示空行的特性，并介绍了'所有部门'作为默认空行内容的用法，帮助开发者理解如何优化用户界面显示和数据呈现方式。
扫一扫
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
