根据 jQuery 在另一个下拉菜单中选择的选项显示隐藏的下拉菜单

Question

我正在尝试弄清楚如何显示隐藏的 div 但我对 jQuery 有点生疏。

因此，当用户从 Menu1 下拉菜单中选择“是”时，我希望 Menu2 下拉菜单显示出来。我正在使用 style="visibility: hidden; 来隐藏 Menu2。

    <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" 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>

Answer 1

您可以在 jQuery 中使用 show 和 hide 函数非常轻松地做到这一点：

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

这是如何工作的：

首先给#Menu2 的容器一个 class 或 ID，这样你就可以在你的 jQuery 中定位它，例如<div id="Menu2Container">
在页面加载时在 jQuery 中隐藏您的 Menu2 容器
为 #Menu1 上的更改事件添加事件处理程序以检测何时选择了选项。
在处理程序中，使用 val()
获取所选选项的值
如果选择“是”，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 是否是隐藏菜单的最佳容器 - 这显然取决于您的布局，但显示和隐藏 col 会影响网格布局并可能影响整体外观。

Answer 2

原版 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>

Answer 3

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

连同 jQuery 功能，例如 => show() and hide() 功能可在您 select 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") //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>

Answer 4

您可以为此使用这个简单的 javascript 代码。无需在此处选择 jQuery。只需给 hidden 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>

根据 jQuery 在另一个下拉菜单中选择的选项显示隐藏的下拉菜单

Show hidden drop down based on selected option in another drop down with jQuery

javascript

jquery

drop-down-menu

dropdown