jquary实现基于AJAX的级联下拉菜单
时间: 2023-12-19 09:06:01 浏览: 52
下面是一个基于AJAX和jQuery实现的级联下拉菜单的示例代码:
HTML代码:
```html
<label for="province">省份:</label>
<select id="province" name="province">
<option value="">请选择</option>
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">广东省</option>
</select>
<label for="city">城市:</label>
<select id="city" name="city">
<option value="">请选择</option>
</select>
```
JS代码:
```javascript
$(function(){
$("#province").change(function(){
var provinceId = $(this).val();
if(provinceId){
$.ajax({
url: "/getCity",
type: "GET",
data: {"provinceId": provinceId},
dataType: "json",
success: function(data){
$("#city").empty().append("<option value=''>请选择</option>");
$.each(data, function(index, item){
$("#city").append("<option value='"+ item.id +"'>"+ item.name +"</option>");
});
}
});
}else{
$("#city").empty().append("<option value=''>请选择</option>");
}
});
});
```
在上面的代码中,我们首先定义了两个下拉菜单,其中省份下拉菜单有三个选项,城市下拉菜单一开始没有选项。当我们选择省份后,页面会向服务器发送一个AJAX请求,获取该省份下的所有城市列表,并将城市列表添加到城市下拉菜单中。如果我们重新选择了其他省份,则会更新城市下拉菜单的选项。如果我们选择了“请选择”选项,则城市下拉菜单中不会显示任何选项。
需要注意的是,上面的代码只是一个示例,实际的ajax请求需要根据自己的后台接口进行调整。同时,需要保证城市列表的返回数据格式为JSON数组,每个城市对象至少包含一个id和一个name属性。