在jQuery的另一个下拉列表中显示基于所选选项的隐藏下拉列表

问题描述

我试图弄清楚如何显示隐藏的div，但对jQuery有点生锈。

因此，当用户从Menu1下拉菜单中选择“是”时，我希望出现Menu2下拉菜单。我正在使用rax=1隐藏Menu2。

style="visibility: hidden;

解决方法

您可以使用show和hide函数在jQuery中轻松完成此操作：

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

工作原理：

1. 首先给＃Menu2的容器提供一个类或ID，以便您可以在jQuery中定位它，例如<div id="Menu2Container">

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

3. 为#Menu1上的更改事件添加事件处理程序，以检测何时选择了选项。

4. 在处理程序中，使用val()

   获取所选选项的值。

5. 如果选择“是”，则show() #Menu2Container，否则hide()

工作示例：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputEmail4">Menu1</label>
            <select class="form-control" name="name" id="Menu1">
                <option value="">--Please choose an option--</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </div>
        <div class="form-group col-md-4" id="Menu2Container">
            <label for="inputPassword4">Menu2</label>
            <select class="form-control" name="pets" id="Menu2">
                <option value="">--Please choose an option--</option>
                <option value="dog">Dog</option>
                <option value="cat">Cat</option>
            </select>
        </div>

注意：我建议考虑是否col网格是菜单最适合隐藏的容器-这显然取决于您的布局，但是显示和隐藏列会影响网格布局，并且可能会影响整体布局外观。

,

Vanilla Javascript：

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

在事件处理程序中设置条件并设置要更改的处理程序，检查是否将事件侦听器的目标值设置为所需的值Yes，如果已设置，则设置div可见...

我确实在您的DIV中添加了一个ID，直接将其定位为目标...

let showMe = document.getElementById("showMe");

let menu1 = document.getElementById("Menu1");


menu1.addEventListener("change",function(e){
  if(this.value === 'Yes'){
     showMe.style.visibility = 'visible';
  }
});

<div class="form-row">
  <div class="form-group col-md-4">
    <label for="inputEmail4">Menu1</label>
    <select class="form-control" name="name" id="Menu1">
      <option value="">--Please choose an option--</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  **
  <div id="showMe" class="form-group col-md-4" style="visibility: hidden;">**
    <label for="inputPassword4">Menu2</label>
    <select class="form-control" name="pets" id="Menu2">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
    </select>
  </div>

,

您可以简单地使用ternary operator（if和else的缩写）

随着jQuery函数像=> show()和hide()函数来显示第二个menu2当选择Yes

只需在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") //element
//Initially hide
$Menu2.hide();
//Chage function
$("#Menu1").on("change",function() {
  $(this).val() == "Yes" ? $Menu2.show() : $Menu2.hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="form-row">
  <div class="form-group col-md-4">
    <label for="inputEmail4">Menu1</label>
    <select class="form-control" name="name" id="Menu1">
      <option value="">--Please choose an option--</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <div class="form-group col-md-4" id="Menu2Container">
    <label for="inputPassword4">Menu2</label>
    <select class="form-control" name="pets" id="Menu2">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
    </select>
  </div>

,

您可以为此使用简单的javascript代码。 无需在这里使用jQuery。 只需给隐藏的div指定一个ID，以便我们可以访问它。

        document.getElementById('Menu1').onchange = e => {
            let hiddenElement = document.getElementById('hiddenDiv')
            e.target.value == 'Yes' ?
                hiddenElement.style.visibility = 'visible' :
                hiddenElement.style.visibility = 'hidden'
        }

    <div class="form-group col-md-4">
        <label for="inputEmail4">Menu1</label>
        <select class="form-control" name="name" id="Menu1">
            <option value="">--Please choose an option--</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </div>
    **<div class="form-group col-md-4" id='hiddenDiv' style="visibility: hidden;">**
        <label for="inputPassword4">Menu2</label>
        <select class="form-control" name="pets" id="Menu2">
            <option value="">--Please choose an option--</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
        </select>
    </div>