我創建了一個簡單的應用程序，其中包含基于先前選擇的<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(); } });
使用 jQuery 選擇時隱藏選擇列表選項值
慕的地6264312
2021-06-10 06:32:36