我创建了一个简单的应用程序，其中包含基于先前选择的<select>列表hide()或show()选项值。
有两个列表，一个与车辆品牌和其他与车辆模型。选择某种制作时，即BMW，下一个制作<select>仅显示BMW模型。反之亦然，奥迪等等。
在“模型”列表中，我为每个<option>值附加了一个 ID，并<option>根据之前的选择显示或隐藏这些值。比如选择BMW，就会隐藏<option>'sQ1和Q3这两款奥迪车型。如果选择奥迪，它将隐藏两个宝马车型<option>'s，X1 和 X2。
我成功地实现了这个基本功能；但是，当我集成 jQuery 的 Chosen 时，它不再起作用。我真的很喜欢 Chosen，一旦我构建了这个应用程序，它将非常有用，所以我很想通过它集成来实现相同的功能。
这是简单的代码文件：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
.chosen-select {width:200px}
.hidden {display: none;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var $models = $('#s2');
var $drivetrain = $('#s3');
var $bmwmodels = $('#X1, #X2');
var $audimodels = $('#Q1, #Q3');
$('#s1').change(function() {
var selectedValue = $(this).val();
if(selectedValue == 'BMW') {
$audimodels.hide();
$drivetrain.parent().hide();
$models.parent().show();
$bmwmodels.show();
}
else if (selectedValue == 'AUDI') {
$bmwmodels.hide();
$drivetrain.parent().hide();
$models.parent().show();
$audimodels.show();
}
else {
$bmwmodels.hide();
$audimodels.hide();
$models.parent().hide();
$drivetrain.parent().hide();
}
});
相关分类