Javascript 使用jQuery根据另一个下拉列表中的选定选项显示隐藏下拉列表

我试图找出如何显示隐藏的div，但我对jQuery有点生疏

因此，当用户从菜单1下拉列表中选择“是”时，我希望菜单2下拉列表显示出来。我用

style=“可见性：隐藏；

来隐藏菜单2

菜单1
--请选择一个选项--
对
不
****
菜单2
--请选择一个选项--
狗
猫

您可以在jQuery中使用

show

和

hide

函数轻松完成此操作：

    $("#Menu2Container").hide(); 
  
    $("#Menu1").on("change", function(){  
        if ($(this).val()=="Yes")
           $("#Menu2Container").show();
        else
           $("#Menu2Container").hide();
    });

工作原理：

首先为#Menu2的容器提供一个类或id，以便您可以在jQuery中定位它，例如

加载页面时，在jQuery中隐藏Menu2容器

为

#Menu1

上的更改事件添加事件处理程序，以检测何时选择了选项

在处理程序中，使用

val（）

如果选择了“是”，则显示菜单容器，否则隐藏它

工作示例：

$（“#Menu2Container”）.hide（）；
$（“#Menu1”）。在（“change”，function（）{
如果（$（this.val（）=“是”）
$（“#Menu2Container”）.show（）；
其他的
$（“#Menu2Container”）.hide（）；
})；

菜单1
--请选择一个选项--
对
不
菜单2
--请选择一个选项--
狗
猫

普通Javascript：

可以使用事件侦听器将可见性更改为可见

在事件处理程序中设置条件并将处理程序设置为更改，检查事件侦听器的目标值是否设置为所需值

Yes

，如果设置为，则将div设置为可见

我确实给你的DIV添加了一个ID直接瞄准它

让showMe=document.getElementById（“showMe”）；
让menu1=document.getElementById（“menu1”）；
菜单1.addEventListener（“更改”，函数（e）{
如果（this.value=='Yes'）{
showMe.style.visibility='visible'；
}
})；

菜单1
--请选择一个选项--
对
不
**
**
菜单2
--请选择一个选项--
狗
猫

您可以简单地使用（if和

else

的缩写形式）

以及jQuery函数，如=>和函数，用于在选择

Yes

时显示第二个

menu2

只需在jQuery中添加以下代码：

const $Menu2 = $("#Menu2Container") //element
$Menu2.hide(); //Initially hide

//Change function
$("#Menu1").on("change", function() {
  $(this).val() == "Yes" ? $Menu2.show() : $Menu2.hide();
});

现场工作演示：

const$Menu2=$（“#Menu2Container”）//元素
//最初隐藏
$Menu2.hide（）；
//切格函数
$（“#菜单1”）。关于（“更改”，函数（）{
$（this.val（）==“是”？$Menu2.show（）：$Menu2.hide（）；
})；

菜单1
--请选择一个选项--
对
不
菜单2
--请选择一个选项--
狗
猫

您可以使用此siple javascript代码来实现这一点。 这里不需要使用jQuery。 只要给隐藏的div一个id，我们就可以访问它

document.getElementById（'Menu1'）。onchange=e=>{
让hiddenElement=document.getElementById（'hiddenDiv'）
e、 target.value=='是'？
hiddenElement.style.visibility='visible'：
hiddenElement.style.visibility='hidden'
}

菜单1
--请选择一个选项--
对
不
****
菜单2
--请选择一个选项--
狗
猫

在菜单1上使用

onchange

事件，检查selectbox的值是否为

Yes

然后

.show（）

该div或

.hide（）

伟人所见略同…你也调用了你的id

#Menu2Container

：）@FluffyKitten Ahh甚至没有注意到我想发生的事情是当我复制OP的HTML时，我可能已经拿起了你的：）我以为OP就是这么用的。谢谢：）

const $Menu2 = $("#Menu2Container") //element
$Menu2.hide(); //Initially hide

//Change function
$("#Menu1").on("change", function() {
  $(this).val() == "Yes" ? $Menu2.show() : $Menu2.hide();
});