Javascript 如何基于多个下拉选择显示多个隐藏字段？

前几天我发布了关于如何切换的帖子

我能够使用一个下拉选项实现它，在本例中为“分支”

在同一个应用程序中，我希望能够选择“分支”、“区域”和“分区”，并显示我选择的相应隐藏字段。这是JSFIDLE，不知道为什么我不能让它们显示：

任何帮助都会很好：）（这是最好的社区，你们都帮了我很多！）

$（“选择[name='YourLocation']）。在（“更改”，函数（）上）{
console.log（$（this.val（））
if（$（this）.val（）=='Branch'）{
$（'.RN'）.show（）；
$（'.BN'）.show（）；
$（'.DN'）.show（）；
}否则{
$（'.RN'）.hide（）；
$（'.BN'）.hide（）；
$（'.DN'）.hide（）；
}
});
$（“选择[name='YourLocation']）。在（“更改”，函数（）上）{
console.log（$（this.val（））
if（$（this）.val（）=='Region'）{
$（'.RN'）.show（）；
$（'.DN'）.show（）；
}否则{
$（'.RN'）.hide（）；
$（'.DN'）.hide（）；
}
});
$（“选择[name='YourLocation']）。在（“更改”，函数（）上）{
console.log（$（this.val（））
if（$（this）.val（）=='Division'）{
$（'.DN'）.show（）；
}否则{
$（'.DN'）.hide（）；
}
});
$（“选择[name='YourLocation']）。在（“更改”，函数（）上）{
console.log（$（this.val（））
if（$（this）.val（）=='Customer Care Center'）{
$（'.CCC'）.show（）；
}否则{
$（'.CCC'）.hide（）；
}
});

你的位置
选择您的位置
分支机构
区域
分部
客户服务中心
公司的
选择你的中心
达拉斯
拉斯维加斯
凤凰
坦帕
.BN{
显示：无；
}
罗恩先生{
显示：无；
}
.DN{
显示：无；
}
.CCC{
显示：无；
}
相同的函数运行三次

$("select[name='YourLocation']").on("change", function()...

当您选择“Branch”时，它将第一次运行并显示所有三个。然后它运行第二次和第三次，并隐藏第二次和第三次。您需要将逻辑组合成一个函数。注释掉后两个函数，当您选择“Branch”时，您将看到它是有效的。
相同的函数运行了三次

$("select[name='YourLocation']").on("change", function()...

当您选择“Branch”时，它将第一次运行并显示所有三个。然后它运行第二次和第三次，并隐藏第二次和第三次。您需要将逻辑组合成一个函数。注释掉后两个函数，您将看到它在选择“Branch”时起作用。
首先：您不需要
$（“select[name='YourLocation']”）。on（“change”，function（）{}）多次，所有情况下都需要一个事件处理程序

这里我使用了
开关
，您可以像
if
+
else if
+
else if
那样操作。但是
开关
要简单得多

默认情况下，逻辑为
$（'.RN、.BN、.DN、.CCC'）.hide（）将隐藏所有内容

注意：您可以像这样组合多个选择器：

$('.RN').show();
$('.BN').show();
$('.DN').show();

/* equals to */
$('.RN, .BN, .DN').show();

每次更改下拉列表时，首先隐藏所有内容。然后展示你应该展示的那个。在每个开关
情况下
可以定义每个情况，在
默认情况下
是默认（else）情况


$（“选择[name='YourLocation']）。在（“更改”，函数（）上）{
$（'.RN、.BN、.DN、.CCC'）.hide（）；
开关（$（this.val（））{
案例“分支机构”：
$（'.RN.BN.DN'）.show（）；
打破
案例“区域”：
$（'.RN'）.show（）；
$（'.DN'）.show（）；
打破
“分部”案件：
$（'.DN'）.show（）；
打破
案例“客户服务中心”：
$（'.CCC'）.show（）；
打破
}
});
//初始化
$（'.RN、.BN、.DN、.CCC'）.hide（）

你的位置
选择您的位置
分支机构
区域
分部
客户服务中心
公司的
选择你的中心
达拉斯
拉斯维加斯
凤凰
坦帕
首先：您不需要
$（“选择[name='YourLocation']）多次，所有情况下都需要一个事件处理程序

这里我使用了
开关
，您可以像
if
+
else if
+
else if
那样操作。但是
开关
要简单得多

默认情况下，逻辑为
$（'.RN、.BN、.DN、.CCC'）.hide（）将隐藏所有内容

注意：您可以像这样组合多个选择器：

$('.RN').show();
$('.BN').show();
$('.DN').show();

/* equals to */
$('.RN, .BN, .DN').show();

每次更改下拉列表时，首先隐藏所有内容。然后展示你应该展示的那个。在每个开关
情况下
可以定义每个情况，在
默认情况下
是默认（else）情况


$（“选择[name='YourLocation']）。在（“更改”，函数（）上）{
$（'.RN、.BN、.DN、.CCC'）.hide（）；
开关（$（this.val（））{
案例“分支机构”：
$（'.RN.BN.DN'）.show（）；
打破
案例“区域”：
$（'.RN'）.show（）；
$（'.DN'）.show（）；
打破
“分部”案件：
$（'.DN'）.show（）；
打破
案例“客户服务中心”：
$（'.CCC'）.show（）；
打破
}
});
//初始化
$（'.RN、.BN、.DN、.CCC'）.hide（）

你的位置
选择您的位置
分支机构
区域
分部
客户服务中心
公司的
选择你的中心
达拉斯
拉斯维加斯
凤凰
坦帕
您的问题是什么？似乎对我有用？当我选择“B”