基于AJAX的省市县级联下拉菜单三级
时间: 2023-12-19 11:05:49 浏览: 57
好的,下面是一个基于AJAX的省市县级联下拉菜单三级的示例代码。假设您已经有了一个包含省市县数据的数据库。
HTML代码:
```
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="county">
<option value="">请选择区县</option>
</select>
```
JavaScript代码:
```
// 获取三个下拉菜单元素
var province = document.getElementById("province");
var city = document.getElementById("city");
var county = document.getElementById("county");
// 页面加载完成后,立即发送AJAX请求,获取所有省份的数据
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "getProvince.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析服务器返回的数据,更新省份下拉菜单的选项
var options = JSON.parse(xhr.responseText);
var html = '<option value="">请选择省份</option>';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].id + '">' + options[i].name + '</option>';
}
province.innerHTML = html;
}
};
xhr.send();
};
// 监听省份下拉菜单的change事件
province.addEventListener("change", function() {
// 获取选中的省份的id
var provinceId = province.value;
// 如果没有选中任何省份,则清空城市和区县下拉菜单的选项
if (provinceId == "") {
city.innerHTML = '<option value="">请选择城市</option>';
county.innerHTML = '<option value="">请选择区县</option>';
return;
}
// 发送AJAX请求,获取对应的城市数据
var xhr = new XMLHttpRequest();
xhr.open("GET", "getCity.php?provinceId=" + provinceId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析服务器返回的数据,更新城市下拉菜单的选项
var options = JSON.parse(xhr.responseText);
var html = '<option value="">请选择城市</option>';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].id + '">' + options[i].name + '</option>';
}
city.innerHTML = html;
// 清空区县下拉菜单的选项
county.innerHTML = '<option value="">请选择区县</option>';
}
};
xhr.send();
});
// 监听城市下拉菜单的change事件
city.addEventListener("change", function() {
// 获取选中的城市的id
var cityId = city.value;
// 如果没有选中任何城市,则清空区县下拉菜单的选项
if (cityId == "") {
county.innerHTML = '<option value="">请选择区县</option>';
return;
}
// 发送AJAX请求,获取对应的区县数据
var xhr = new XMLHttpRequest();
xhr.open("GET", "getCounty.php?cityId=" + cityId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析服务器返回的数据,更新区县下拉菜单的选项
var options = JSON.parse(xhr.responseText);
var html = '<option value="">请选择区县</option>';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].id + '">' + options[i].name + '</option>';
}
county.innerHTML = html;
}
};
xhr.send();
});
```
其中,getProvince.php、getCity.php和getCounty.php是服务器端的脚本文件,用于获取省份、城市和区县的数据。您需要根据自己的实际情况进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)