miniui 行政区划三级联动展示
时间: 2023-11-22 22:54:15 浏览: 119
asp+js三级联动
在 miniui 中展示行政区划三级联动需要使用 miniui 的 ComboBox 组件,同时结合行政区划数据进行展示。
以下是一个简单的示例代码,可以供参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>miniui 行政区划三级联动展示</title>
<meta charset="utf-8" />
</head>
<body>
<div id="province"></div>
<div id="city"></div>
<div id="district"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/miniui/3.10.0/miniui.js"></script>
<link href="https://cdn.bootcss.com/miniui/3.10.0/themes/default/miniui.css" rel="stylesheet" />
<script>
// 省份数据
var provinceData = [
{ id: 1, name: "北京市" },
{ id: 2, name: "上海市" },
{ id: 3, name: "广东省" }
];
// 城市数据
var cityData = {
1: [
{ id: 11, name: "北京市" }
],
2: [
{ id: 21, name: "上海市" }
],
3: [
{ id: 31, name: "广州市" },
{ id: 32, name: "深圳市" },
{ id: 33, name: "珠海市" }
]
};
// 区县数据
var districtData = {
11: [
{ id: 1101, name: "东城区" },
{ id: 1102, name: "西城区" },
{ id: 1103, name: "崇文区" },
{ id: 1104, name: "宣武区" }
],
21: [
{ id: 2101, name: "黄浦区" },
{ id: 2102, name: "卢湾区" },
{ id: 2103, name: "徐汇区" },
{ id: 2104, name: "长宁区" }
],
31: [
{ id: 3101, name: "天河区" },
{ id: 3102, name: "海珠区" },
{ id: 3103, name: "番禺区" },
{ id: 3104, name: "花都区" }
],
32: [
{ id: 3201, name: "福田区" },
{ id: 3202, name: "罗湖区" },
{ id: 3203, name: "南山区" },
{ id: 3204, name: "宝安区" }
],
33: [
{ id: 3301, name: "香洲区" },
{ id: 3302, name: "斗门区" },
{ id: 3303, name: "金湾区" }
]
};
// 初始化省份下拉框
var provinceCombo = mini.get("province");
provinceCombo.setData(provinceData);
// 初始化城市下拉框
var cityCombo = mini.get("city");
cityCombo.setData(cityData[provinceCombo.getValue()]);
// 初始化区县下拉框
var districtCombo = mini.get("district");
districtCombo.setData(districtData[cityCombo.getValue()]);
// 省份下拉框值改变事件
provinceCombo.on("valuechanged", function () {
cityCombo.setData(cityData[provinceCombo.getValue()]);
cityCombo.select(0);
districtCombo.setData(districtData[cityCombo.getValue()]);
districtCombo.select(0);
});
// 城市下拉框值改变事件
cityCombo.on("valuechanged", function () {
districtCombo.setData(districtData[cityCombo.getValue()]);
districtCombo.select(0);
});
</script>
</body>
</html>
```
在上述代码中,我们首先定义了三个下拉框,分别用于展示省份、城市和区县。接着,我们定义了省份、城市和区县的数据,这些数据可以从后端获取,也可以直接在前端定义。
在代码中,我们使用 `mini.get` 方法获取到了省份下拉框、城市下拉框和区县下拉框,并将对应的数据通过 `setData` 方法设置到了下拉框中。同时,我们为省份下拉框和城市下拉框分别绑定了 `valuechanged` 事件,当省份下拉框的值改变时,会自动更新城市下拉框和区县下拉框的数据。城市下拉框的值改变时,会自动更新区县下拉框的数据。
运行上述代码,即可看到行政区划三级联动的效果。
阅读全文