從屬選擇與選擇jquery

Question

我只是想做一些非常簡單的事情，這是一個選擇取決於選擇哪個選項它填充第二個選擇。

我總是通過隱藏/顯示選擇這種方式（JS）做到了這一點：

$(document).ready(function() {  
$("#select_1").change(function() { 
     if ($("#select_1").val()=="A") { 
     $("#select_2").show(); 
     $("#select_3").hide(); 
    } 

    else if ($("#select_1").val()=="B") { 
     $("#select_3").show(); 
     $("#select_2").hide(); 
    }; 
}); 

但現在我想選擇和它不工作。它將刪除所有選定的蒙版並將選擇返回到本機。我也試過這個（JS）：

$(document).ready(function(e) { 
    $("#select_2").css('visibility','hidden'); 
    $(".chosen").chosen(); 
    $("#select_1").click(function() { 
    if ($("#select_1").val()=="A") { 
    $("#select_2").css('visibility','visible'); 

    } 

而且它也不起作用。它並沒有消除選擇，但沒有做任何事情。對此有何想法？我知道這聽起來很基本，因爲我無法在任何地方找到準確的答案。

PS：我想用JS做，而不是通過AJAX。

Answer 1

我假設＃select_1是將所選插件應用於它。如果這是正確的，＃select_1將有一種顯示風格：無;應用於它，所以你不會註冊任何'點擊'事件。

如果您查看「選定」文檔http://harvesthq.github.io/chosen/，您可以發現如何向選定元素註冊更改處理程序。

如果選擇應用於＃select_2和＃select_3，那麼切換這兩個元素的可見性是沒有意義的，因爲它們已經隱藏了。所選插件呈現的HTML將具有ID爲＃select_2_chosen和＃select_3_chosen的容器元素 - 因此切換這些元素的可見性！

以下代碼假定＃select_2和＃select_3具有「選擇」類。我正在將所選內容應用到＃select_1，以便我可以綁定對它唯一的更改事件。最後，我在定義更改處理程序後立即觸發change事件，以便＃select_3_chosen將隱藏。

$(".chosen").chosen(); 
$("#select_1").chosen().change(function() { 
    var value = $(this).val(); 
    if (value=="A") { 
     $("#select_2_chosen").css('visibility','visible'); 
     $("#select_3_chosen").css('visibility','hidden'); 
    } else if (value == "B") { 
     $("#select_2_chosen").css('visibility','hidden'); 
     $("#select_3_chosen").css('visibility','visible'); 
    } 
}).trigger('change');