上一条发的不是级联选择器 而是三个单级的选择器 请修改成级联选择器
时间: 2023-08-19 20:06:10 浏览: 52
非常抱歉之前的回答没有满足你的需求。下面是一个修改后的代码示例,实现了级联选择器的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Multi-level Cascading Select with Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="form-group">
<label for="select1">Select 1:</label>
<select id="select1" class="form-control">
<option value="">Select option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="select2">Select 2:</label>
<select id="select2" class="form-control">
<option value="">Select option</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="select3">Select 3:</label>
<select id="select3" class="form-control">
<option value="">Select option</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// 第一级选择器改变时触发
$('#select1').change(function() {
var selectedOption = $(this).val();
// 清空第二级和第三级选择器的选项
$('#select2').empty().append('<option value="">Select option</option>');
$('#select3').empty().append('<option value="">Select option</option>');
// 根据第一级选择器的选中值动态添加第二级选择器的选项
if (selectedOption === '1') {
$('#select2').append('<option value="1">Option 1-1</option>');
$('#select2').append('<option value="2">Option 1-2</option>');
$('#select2').append('<option value="3">Option 1-3</option>');
} else if (selectedOption === '2') {
$('#select2').append('<option value="4">Option 2-1</option>');
$('#select2').append('<option value="5">Option 2-2</option>');
$('#select2').append('<option value="6">Option 2-3</option>');
} else if (selectedOption === '3') {
$('#select2').append('<option value="7">Option 3-1</option>');
$('#select2').append('<option value="8">Option 3-2</option>');
$('#select2').append('<option value="9">Option 3-3</option>');
}
});
// 第二级选择器改变时触发
$('#select2').change(function() {
var selectedOption = $(this).val();
// 清空第三级选择器的选项
$('#select3').empty().append('<option value="">Select option</option>');
// 根据第二级选择器的选中值动态添加第三级选择器的选项
if (selectedOption === '1') {
$('#select3').append('<option value="1">Option 1-1-1</option>');
$('#select3').append('<option value="2">Option 1-1-2</option>');
$('#select3').append('<option value="3">Option 1-1-3</option>');
} else if (selectedOption === '2') {
$('#select3').append('<option value="4">Option 1-2-1</option>');
$('#select3').append('<option value="5">Option 1-2-2</option>');
$('#select3').append('<option value="6">Option 1-2-3</option>');
} else if (selectedOption === '3') {
$('#select3').append('<option value="7">Option 2-1-1</option>');
$('#select3').append('<option value="8">Option 2-1-2</option>');
$('#select3').append('<option value="9">Option 2-1-3</option>');
}
});
});
</script>
</body>
</html>
```
在这个例子中,我们一共有三个选择器,每个选择器都有不同的选项。当第一个选择器的选项改变时,会动态更新后面两个选择器的选项。第二个选择器的选项取决于第一个选择器的选中值,第三个选择器的选项取决于第二个选择器的选中值。
希望这次的回答能满足你的需求。如果你有任何其他问题,请随时提问!