Question

我是jQuery，JS等的新手，非常感谢有人可以帮助我解决下一个问题：

我被要求实施多个过滤器并公开它们，以便访问者可以过滤页面上显示的信息/数据。
我被要求隐藏或显示从属过滤器，具体取决于主过滤器中选择的选项。我的意思是，有一个主要类别的第一个下拉菜单，下面显示第二个下拉菜单，其中包含子类别，这取决于先前在第一个下拉菜单中选择的选项。例如，如果第一个下拉菜单显示＆＃34; - 任何 - ＆＃34;，则显示的第二个下拉菜单是显示整个子类别列表的菜单，但如果第一个下拉菜单显示主要类别，则显示的第二个下拉菜单是显示相应子类别的菜单（例如，如果在第一个下拉菜单中选择了陆军工程兵队的主要类别，那么下面会显示陆军工程兵队子类别下拉菜单及其所有选项）。我被要求一直显示主要类别下拉菜单，但只有一个子类别下拉菜单对应于在主类别下拉菜单中选择的选项，并隐藏其他子类别下拉菜单。因此，一次只显示一个子类别下拉菜单。
为实现这一目标，我实现了下一个jQuery代码：

＆＃13;

jQuery(document).ready(function ($) {

if($("#edit-command").val() == "All"){
 $("#edit-contracting-office-id-wrapper").show();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "1"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").show();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "2"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").show();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "3"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").show();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "4"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").show();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "5"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").show();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "6"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").show();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "7"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").show();
 $("#edit-ngb-contracting-offices-wrapper").hide();
 }
 if($("#edit-command").val() == "8"){
 $("#edit-contracting-office-id-wrapper").hide();
 $("#edit-ace-contracting-offices-wrapper").hide();
 $("#edit-inscom-contracting-offices-wrapper").hide();
 $("#edit-amc-contracting-offices-wrapper").hide();
 $("#edit-medcom-contracting-offices-wrapper").hide();
 $("#edit-mraa-contracting-offices-wrapper").hide();
 $("#edit-peo-stri-contracting-offices-wrapper").hide();
 $("#edit-smdc-contracting-offices-wrapper").hide();
 $("#edit-ngb-contracting-offices-wrapper").show();
 }

})(jQuery);

＆＃13;

因此，jQuery可以很好地显示和隐藏子类别下拉菜单，具体取决于在主类别下拉菜单中选择的选项。
但是，我注意到在过滤器渲染和页面重新加载后显示信息/数据的问题。
我将尽力在下一个例子中逐步解释自己：

1）我转到页面，主要类别（Command）和子类别（Contracting Offices）下拉菜单显示＆＃34; - Any - ＆＃34;，并显示所有信息/数据

2）我点击Command下拉菜单，选择Army Corps of Engineers，Contracting Offices下拉菜单更改为ACE Contracting Offices，并显示相应的信息/数据

3）我点击Command下拉菜单，选择另一个命令，例如Army Materiel Command，Contracting Offices下拉菜单更改为AMC Contracting Offices，显示的信息/数据也相应改变。再次，我点击命令下拉菜单，选择另一个命令，例如国民警卫局，合同办公室下拉菜单更改为NGB合同办公室，并显示的信息/数据相应更改。到目前为止一切运作良好。

4）但是，当我从Command中选择一个选项以及从Contracting Offices下拉菜单中选择一个选项时，就会出现问题。

5）接下来让我举几个例子。

6）我在Command下选择陆军工程兵团，然后我选择ACE Contracting Offices下的陆军地理空间中心，底部的信息/数据相应地改变，一切正常并且看起来很好。

7）现在，当我选择时，例如＆＃34; - 任何 - ＆＃34;在Command下，ACE Contracting Offices下拉菜单更改为Contracting Office Name，但显示的信息会一直显示上一次选择的Army Geospatial Center数据。

8）现在，如果我在Command下再次选择陆军工程兵团，则Contracting Office Name下拉菜单将更改为ACE Contracting Offices，但是陆军地理空间中心仍然处于选中状态，并且显示的信息会一直显示陆军地理空间中心数据。 / p>

9）现在，如果我再次选择＆＃34; - 任何 - ＆＃34;在Command下，ACE Contracting Offices下拉菜单更改为Contracting Office Name，但显示的信息仍显示Army Army Geospatial Center数据。

10）现在，如果我将命令更改回陆军工程兵团，则“合同办公室名称”下拉菜单将更改回ACE合同办公室，但“军事地理空间中心”仍保留在子类别下拉菜单中，并且底部的信息仍显示陆军地理空间中心数据。

11）现在，我在ACE Contracting Offices子类别下拉菜单中选择冷区研究和工程实验室，显示的信息/数据会相应变化，一切看起来都很好。

12）现在，如果我再次选择＆＃34; - 任何 - ＆＃34;在Command下，ACE Contracting Offices下拉菜单更改为Contracting Office Name，但是再次显示的信息无法正确呈现，因为Cold Regions Research and Engineering Laboratory数据会一直显示，就像之前的Army Geospatial示例一样中心。

13）现在，如果我选择另一个Command，例如Army Materiel Command，AMC Contracting Offices的Contracting Office Name下拉菜单会更改，但显示的信息/数据会完全消失，如果我更改了签约办公室，则会出现问题保持不变，如果我更改命令，数据仍然无法显示。

请点击下一个链接查看截图以获取视觉参考：

image1 image2

我需要将哪些内容添加到我的jQuery代码中，以便过滤器根据需要运行并正确显示数据？

事先，非常感谢您的关注和及时的帮助!!

Answer 1

您的说明中有太多内容可供任何人轻松理解该问题。这就是为什么尝试将问题简化为简短，独立的测试用例真的很有帮助。如果您还可以创建一个演示问题的fiddle，那就更好了。

我想分享编程课程。您的示例中有许多重复的代码。这使得难以遵循和维护代码，并且很容易引入无意的错误。

由于所有重复的代码块都做同样的事情，唯一的区别是哪些选择器被隐藏或显示，您可以将所有这些代码组合成一个只有一个选择器列表的函数。例如，您可以这样做：

jQuery(document).ready( function ( $ ) {
    updateVisibility();

    var selectors = [
        '#edit-contracting-office-id-wrapper',
        '#edit-ace-contracting-offices-wrapper',
        '#edit-inscom-contracting-offices-wrapper',
        '#edit-amc-contracting-offices-wrapper',
        '#edit-medcom-contracting-offices-wrapper',
        '#edit-mraa-contracting-offices-wrapper',
        '#edit-peo-stri-contracting-offices-wrapper',
        '#edit-smdc-contracting-offices-wrapper',
        '#edit-ngb-contracting-offices-wrapper'
    ];

    function updateVisibility() {
        var value = $('#edit-command').val();
        if( value == 'All' ) {
            value = 0;  // 'All' refers to the first selector
        }
        value = +value;  // Convert to a number
        // Hide each element, but show the one where index == value
        $.each( selectors, function( index, selector ) {
            $(selector).toggle( index == value );
        });
    }
});

此代码遍历所有选择器，隐藏除了要根据#edit-command元素的值显示的元素之外的所有元素。

使用jQuery＆＃39; ready函数的方式也有错误：

jQuery(document).ready( function( $ ) {
    // ...
})( jQuery );

应该像这样调用：

jQuery(document).ready( function( $ ) {
    // ...
});

使用适当的缩进也非常重要，如这些示例所示。它使代码更容易理解。

过滤依赖问题

1 个答案: