miniui 下拉框行政区划三级联动展示代码

以下是一个基于 miniui 的行政区划三级联动下拉框展示代码，使用了 jQuery 和 miniui 的 ComboBox 组件：

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 格式，示例数据如下：

[
    {
        "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 代码：

$(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 加载该城市下的区县数据，并将区县下拉框启用。如果省份下拉框没有选中任何省份，则禁用城市和区县下拉框；如果城市下拉框没有选中任何城市，则禁用区县下拉框。