我创建了一个简单的应用程序，其中包含基于先前选择的<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(); } });
添加回答
举报
0/150
提交
取消