1

我只想做一些非常简单的事情，这是一个选择，取决于选择了哪个选项，它会填充第二个选择。

我总是通过以这种方式隐藏/显示选择来做到这一点（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。

4

1 回答 1

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，以便我可以绑定对其唯一的更改事件。最后，我在定义更改处理程序后立即触发更改事件，以便隐藏#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');
于 2014-03-29T03:49:05.797 回答