基于AJAX的级联下拉菜单 html完整版
时间: 2023-10-25 19:06:32 浏览: 102
以下是基于 AJAX 实现的级联下拉菜单的完整 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>级联下拉菜单</title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#province").change(function() {
var provinceId = $(this).val();
$.ajax({
url: "get_cities.php",
type: "POST",
data: {province_id: provinceId},
dataType: "json",
success: function(data) {
$("#city").empty();
$("#city").append("<option value=''>请选择城市</option>");
$.each(data, function(index, city) {
$("#city").append("<option value='" + city.id + "'>" + city.name + "</option>");
});
}
});
});
});
</script>
</head>
<body>
<div>
<label>省份:</label>
<select id="province">
<option value="">请选择省份</option>
<option value="1">广东</option>
<option value="2">江苏</option>
<option value="3">浙江</option>
</select>
</div>
<div>
<label>城市:</label>
<select id="city">
<option value="">请选择城市</option>
</select>
</div>
</body>
</html>
```
其中,`get_cities.php` 是一个用于获取城市数据的 PHP 文件,返回的数据格式应该为 JSON 格式。在此文件中,可以根据传入的省份 ID 来查询相应的城市数据,并将其转换为 JSON 格式返回。在 JavaScript 中,通过 AJAX 发送请求获取数据,并将数据动态地填充到页面中的城市下拉菜单中。
阅读全文