使用jQuery選擇時隱藏選擇列表選項值
[英]Hiding select list option values while using jQuery Chosen
問題描述
我創建了一個簡單的應用程序，其中包含<select>列表，這些列表根據先前的選擇hide()或show()選項值。
有兩個列表，一個與汽車制造和其他同車型 。 選擇某個品牌（例如BMW）時，下一個Make <select>僅顯示寶馬車型。 反之亦然，奧迪等等。
在“ 模型”列表中，我為每個<option>值附加了一個ID，並根據先前的選擇顯示或隱藏了這些<option>值。 例如，如果選擇了寶馬，它將隱藏兩個奧迪車型<option>'s Q1和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(); } }); //Hide onload function hide() { $models.parent().hide(); $drivetrain.parent().hide(); $bmwmodels.hide(); $audimodels.hide(); } // call hide AFTER .chosen() has been invoked on the visible elements hide(); }); </script> </head> <body onload="hide()"> <table> <tr> <td> <select data-placeholder="Select Brand" class="chosen-select" id="s1"> <option disabled selected></option> <option value="BMW">BMW</option> <option value="AUDI">AUDI</option> <option value="nothing" id="nothing">Nothing</option> </select> </td> </tr> <tr> <td> <select data-placeholder="Select Model" class="chosen-select" id="s2"> <option disabled selected></option> <option value="nothing" id="nothing">Nothing</option> <option value="X1" id="X1">X1</option> <option value="X2" id="X2">X2</option> <option value="Q1" id="Q1">Q1</option> <option value="Q3" id="Q3">Q3</option> </select> </td> </tr> </table> </body> </html>
任何幫助將不勝感激！ 非常感謝。
1 個解決方案
解決方案1
1 已采納 2019-05-27 01:07:48
$(".chosen-select").trigger('chosen:updated'); 您需要通知Chosen您的選項已更新。 此代碼更新了選擇的代碼，以處理更新的選項。
需要注意的一件事是刪除預選功能無效，您需要在選擇的解決方案中找到有關如何刪除預選功能的解決方案。
$(document).ready(function() { var $models = $('#s2'); var $drivetrain = $('#s3'); var $bmwmodels = $('#X1, #X2'); var $audimodels = $('#Q1, #Q3'); console.log( $bmwmodels, $audimodels); $('#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(); } $(".chosen-select").trigger('chosen:updated'); }); //Hide onload function hide() { $models.parent().hide(); $drivetrain.parent().hide(); $bmwmodels.hide(); $audimodels.hide(); } // call hide AFTER .chosen() has been invoked on the visible elements $(".chosen-select").chosen({ disable_search_threshold: 4 }); hide(); });
.chosen-select { width: 200px } .hidden { display: none; }
<!DOCTYPE html> <html> <head> <title>Test</title> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"> <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> </head> <body> <table> <tr> <td> <select data-placeholder="Select Brand" class="chosen-select" id="s1"> <option disabled selected></option> <option value="BMW">BMW</option> <option value="AUDI">AUDI</option> <option value="nothing" id="nothing">Nothing</option> </select> </td> </tr> <tr> <td> <select data-placeholder="Select Model" class="chosen-select" id="s2"> <option disabled selected></option> <option value="nothing" id="nothing">Nothing</option> <option value="X1" id="X1">X1</option> <option value="X2" id="X2">X2</option> <option value="Q1" id="Q1">Q1</option> <option value="Q3" id="Q3">Q3</option> </select> </td> </tr> </table> </body> </html>
根據選擇列表中的所選選項運行功能？ （不首選jQuery）
[英]Run a function based on the chosen option in a select list? (no jQuery is preferred)
jQuery選擇：選擇1個選項，然后在另一個選擇菜單中取消選擇相同的選項
[英]jQuery Chosen: select 1 option and deselect the same option in another select menu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.