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将具有display：none;适用于它，所以你不会在其上注册任何“点击”事件。

如果查看“已选择”文档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');

依赖选择选择Jquery

1 个答案: