从属选择与选择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');