基于AJAX实现三级级联下拉菜单,要包括sql文件
时间: 2023-12-19 12:06:43 浏览: 91
jsp实现级联菜单 jsp实现级联菜单
3星 · 编辑精心推荐
下面是一个基于AJAX实现三级级联下拉菜单的示例代码。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>AJAX 三级级联下拉菜单</title>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择省份</option>
</select>
<select id="city" name="city">
<option value="">请选择城市</option>
</select>
<select id="area" name="area">
<option value="">请选择区县</option>
</select>
<script type="text/javascript">
$(function(){
// 加载省份列表
$.get("get_province.php", function(data){
$("#province").html(data);
});
// 省份变化时,加载城市列表
$("#province").change(function(){
var province_id = $(this).val();
$.get("get_city.php", {"province_id":province_id}, function(data){
$("#city").html(data);
$("#area").html("<option value=''>请选择区县</option>"); // 清空区县列表
});
});
// 城市变化时,加载区县列表
$("#city").change(function(){
var city_id = $(this).val();
$.get("get_area.php", {"city_id":city_id}, function(data){
$("#area").html(data);
});
});
});
</script>
</body>
</html>
```
get_province.php代码:
```
<?php
header("Content-Type:text/html; charset=utf-8");
mysql_connect("localhost", "root", "");
mysql_select_db("test");
$result = mysql_query("SELECT * FROM province");
while($row = mysql_fetch_assoc($result)){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
mysql_close();
?>
```
get_city.php代码:
```
<?php
header("Content-Type:text/html; charset=utf-8");
mysql_connect("localhost", "root", "");
mysql_select_db("test");
$province_id = $_GET['province_id'];
$result = mysql_query("SELECT * FROM city WHERE province_id=".$province_id);
while($row = mysql_fetch_assoc($result)){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
mysql_close();
?>
```
get_area.php代码:
```
<?php
header("Content-Type:text/html; charset=utf-8");
mysql_connect("localhost", "root", "");
mysql_select_db("test");
$city_id = $_GET['city_id'];
$result = mysql_query("SELECT * FROM area WHERE city_id=".$city_id);
while($row = mysql_fetch_assoc($result)){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
mysql_close();
?>
```
上面的代码实现了三级级联下拉菜单的功能,其中`get_province.php`、`get_city.php`和`get_area.php`分别返回省份、城市和区县的列表。需要注意的是,上面的代码只是示例代码,实际使用时需要根据具体的数据库结构和表结构进行修改。同时,上面的代码使用了mysql_connect等函数,这些函数已经在PHP 7.0版本中被废弃,推荐使用mysqli或PDO等数据库扩展库。
阅读全文