以下是基于
AJAX 的级联下拉菜单三级以上的示例 HTML 完整版：
```html
<!DOCTYPE html>
<html>
<head>
<title>Cascading Dropdowns</title>
<script src="https://
ajax.googleapis.com/
ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#make').on('change', function(){
var makeID = $(this).val();
if(makeID){
$.
ajax({
type:'POST',
url:'
ajaxdata.php',
data:'make_id='+makeID,
success:function(html){
$('#model').html(html);
$('#trim').html('<option value="">Select Model first</option>');
}
});
}else{
$('#model').html('<option value="">Select Make first</option>');
$('#trim').html('<option value="">Select Model first</option>');
}
});
$('#model').on('change', function(){
var modelID = $(this).val();
if(modelID){
$.
ajax({
type:'POST',
url:'
ajaxdata.php',
data:'model_id='+modelID,
success:function(html){
$('#trim').html(html);
}
});
}else{
$('#trim').html('<option value="">Select Model first</option>');
}
});
});
</script>
</head>
<body>
<div>
<label>Make:</label>
<select id="make" name="make">
<option value="">Select Make</option>
<option value="1">Toyota</option>
<option value="2">Nissan</option>
<option value="3">Honda</option>
</select>
</div>
<div>
<label>Model:</label>
<select id="model" name="model">
<option value="">Select Make first</option>
</select>
</div>
<div>
<label>Trim:</label>
<select id="trim" name="trim">
<option value="">Select Model first</option>
</select>
</div>
</body>
</html>
```
注意，此示例中使用了一个名为 `
ajaxdata.php` 的 PHP 文件，用于处理
AJAX 请求和返回下拉菜单选项。在这个文件中，您需要编写 PHP 代码来查询数据库或获取数据，并将其作为 HTML 返回给
AJAX 请求。以下是 `
ajaxdata.php` 的示例代码：
```php
<?php
// Database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'cascadingdropdowns';
// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
// Get make options based on make_id
if(isset($_POST["make_id"]) && !empty($_POST["make_id"])){
// Fetch model options based on make_id
$query = "SELECT * FROM models WHERE make_id = ".$_POST['make_id']." AND status = 1 ORDER BY model_name ASC";
$result = $db->query($query);
// Generate model options list
if($result->num_rows > 0){
echo '<option value="">Select Model</option>';
while($row = $result->fetch_assoc()){
echo '<option value="'.$row['model_id'].'">'.$row['model_name'].'</option>';
}
}else{
echo '<option value="">Model not available</option>';
}
}
// Get trim options based on model_id
if(isset($_POST["model_id"]) && !empty($_POST["model_id"])){
// Fetch trim options based on model_id
$query = "SELECT * FROM trims WHERE model_id = ".$_POST['model_id']." AND status = 1 ORDER BY trim_name ASC";
$result = $db->query($query);
// Generate trim options list
if($result->num_rows > 0){
echo '<option value="">Select Trim</option>';
while($row = $result->fetch_assoc()){
echo '<option value="'.$row['trim_id'].'">'.$row['trim_name'].'</option>';
}
}else{
echo '<option value="">Trim not available</option>';
}
}
?>
```
请注意，此示例中使用了名为 `cascadingdropdowns` 的 MySQL 数据库，其中包含三个表：
```mysql
CREATE TABLE IF NOT EXISTS `makes` (
`make_id` int(11) NOT NULL AUTO_INCREMENT,
`make_name` varchar(255) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1',
PRIMARY KEY (`make_id`)
);
CREATE TABLE IF NOT EXISTS `models` (
`model_id` int(11) NOT NULL AUTO_INCREMENT,
`model_name` varchar(255) NOT NULL,
`make_id` int(11) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1',
PRIMARY KEY (`model_id`),
FOREIGN KEY (`make_id`)
REFERENCES `makes`(`make_id`)
);
CREATE TABLE IF NOT EXISTS `trims` (
`trim_id` int(11) NOT NULL AUTO_INCREMENT,
`trim_name` varchar(255) NOT NULL,
`model_id` int(11) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1',
PRIMARY KEY (`trim_id`),
FOREIGN KEY (`model_id`)
REFERENCES `models`(`model_id`)
);
```
您可以根据自己的需求更改数据库和表名称，以及更改
AJAX 调用的 PHP 文件名称。
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
