要實現jQuery Select聯動效果,您可以使用以下方法:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<select class="mySelect">
<option value="option1">選項1</option>
<option value="option2">選項2</option>
<option value="option3">選項3</option>
</select>
<select class="mySelect">
<option value="optionA">選項A</option>
<option value="optionB">選項B</option>
<option value="optionC">選項C</option>
</select>
change
事件監聽器。然后,根據所選值更新其他下拉列表的可用選項。例如:$(document).ready(function() {
$('.mySelect').on('change', function() {
var selectedValue = $(this).val();
var otherSelect = $(this).siblings('.mySelect');
// 根據所選值清空其他下拉列表的選項
otherSelect.empty();
// 根據所選值添加新的可用選項
switch (selectedValue) {
case 'option1':
otherSelect.append('<option value="optionA">選項A</option>');
otherSelect.append('<option value="optionB">選項B</option>');
break;
case 'option2':
otherSelect.append('<option value="optionC">選項C</option>');
break;
case 'option3':
otherSelect.append('<option value="optionA">選項A</option>');
otherSelect.append('<option value="optionC">選項C</option>');
break;
}
});
});
現在,當您更改一個下拉列表的選項時,其他下拉列表將根據所選值更新其可用選項。您可以根據需要修改此示例以適應您的具體需求。