miniui 下拉框行政区划三级联动展示代码
时间: 2024-06-08 08:06:12 浏览: 14
以下是使用 miniui 实现的行政区划三级联动下拉框展示的代码示例:
HTML 代码:
```html
<div>
<input id="province" name="province" class="mini-combobox" textField="name" valueField="code" url="./data/provinces.json" onvaluechanged="onProvinceChanged" allowInput="false" placeholder="请选择省份"/>
<input id="city" name="city" class="mini-combobox" textField="name" valueField="code" url="./data/cities.json" allowInput="false" placeholder="请选择城市"/>
<input id="district" name="district" class="mini-combobox" textField="name" valueField="code" url="./data/districts.json" allowInput="false" placeholder="请选择区县"/>
</div>
```
JavaScript 代码:
```javascript
// 省份下拉框选择事件
function onProvinceChanged(e) {
var cityCombo = mini.get("city"); // 获取城市下拉框组件
var districtCombo = mini.get("district"); // 获取区县下拉框组件
// 设置城市下拉框的 url 参数为选择的省份编码
cityCombo.setUrl("./data/cities.json?provinceCode=" + e.value);
// 清空城市、区县下拉框的选项
cityCombo.setValue("");
districtCombo.setValue("");
// 如果选择的是直辖市或特别行政区,则直接加载区县下拉框的选项
if (e.selected.name === "北京市" || e.selected.name === "上海市" || e.selected.name === "天津市" || e.selected.name === "重庆市" || e.selected.name === "香港特别行政区" || e.selected.name === "澳门特别行政区") {
districtCombo.setUrl("./data/districts.json?cityCode=" + e.value);
}
}
// 页面加载完成后执行的初始化代码
$(function () {
// 初始化省份下拉框
var provinceCombo = mini.get("province");
provinceCombo.setValue("");
// 初始化城市、区县下拉框
var cityCombo = mini.get("city");
cityCombo.setEnabled(false);
cityCombo.setValue("");
var districtCombo = mini.get("district");
districtCombo.setEnabled(false);
districtCombo.setValue("");
});
```
注意:上述代码中的 `./data/provinces.json`、`./data/cities.json`、`./data/districts.json` 分别为三个 JSON 数据文件的路径,这三个文件应该包含对应的行政区划数据。具体的数据格式可以根据实际需求进行定义。
相关推荐
![](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)