jquery无限级联动下拉选择插件
时间: 2023-06-28 08:15:23 浏览: 106
可以使用jQuery的ajax和json来实现无限级联动下拉选择。以下是一个简单的示例代码:
HTML部分:
```html
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
```
JavaScript部分:
```javascript
$(function(){
// 加载省份列表
$.getJSON("province.json", function(data){
$.each(data, function(i, item){
$("#province").append("<option value='" + item.id + "'>" + item.name + "</option>");
});
});
// 加载城市列表
$("#province").change(function(){
var provinceId = $(this).val();
$("#city").empty().append("<option value=''>请选择城市</option>");
$.getJSON("city.json", {provinceId: provinceId}, function(data){
$.each(data, function(i, item){
$("#city").append("<option value='" + item.id + "'>" + item.name + "</option>");
});
});
});
// 加载区县列表
$("#city").change(function(){
var cityId = $(this).val();
$("#district").empty().append("<option value=''>请选择区县</option>");
$.getJSON("district.json", {cityId: cityId}, function(data){
$.each(data, function(i, item){
$("#district").append("<option value='" + item.id + "'>" + item.name + "</option>");
});
});
});
});
```
其中,`province.json`、`city.json`和`district.json`分别是省份、城市和区县的数据文件,格式如下:
```json
// province.json
[
{"id": "1", "name": "北京市"},
{"id": "2", "name": "上海市"},
{"id": "3", "name": "广东省"},
...
]
```
```json
// city.json
[
{"id": "1", "name": "北京市", "provinceId": "1"},
{"id": "2", "name": "上海市", "provinceId": "2"},
{"id": "3", "name": "广州市", "provinceId": "3"},
{"id": "4", "name": "深圳市", "provinceId": "3"},
...
]
```
```json
// district.json
[
{"id": "1", "name": "东城区", "cityId": "1"},
{"id": "2", "name": "西城区", "cityId": "1"},
{"id": "3", "name": "黄浦区", "cityId": "2"},
{"id": "4", "name": "徐汇区", "cityId": "2"},
{"id": "5", "name": "天河区", "cityId": "3"},
{"id": "6", "name": "越秀区", "cityId": "3"},
{"id": "7", "name": "南山区", "cityId": "4"},
{"id": "8", "name": "福田区", "cityId": "4"},
...
]
```
这里的`provinceId`和`cityId`是用来表示关联关系的,可以根据实际情况进行修改。
阅读全文