CODEWITHSUNDEEP
javascriptjquerydrop-down-menudropdown
user5148719
user5148719

Reputation:

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

I'm trying to figure out how to show hidden div but I'm a little rusty on jQuery.

So when a user selects "Yes" from Menu1 dropdown, I want the Menu2 dropdown to show up. l'm using style="visibility: hidden; to hide Menu2.

enter image description here enter image description here

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

Upvotes: 2

Views: 2786

Answers (4)

Always Helping
Always Helping

Reputation: 14570

You can simply use ternary operator (short form of if and else)

Along with jQuery functions like => show() and hide() function to display your second menu2 when you select Yes

Just add this code in jQuery:

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

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

Live working demo:

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>

Upvotes: 0

Tejas soni
Tejas soni

Reputation: 26

You can use this siple javascript code for that. No need to go for jQuery here. just give a id to hidden div so we can access it.

        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>

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

You can do it very easily in jQuery using the show and hide functions:

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

How this works:

  1. First give a class or id to #Menu2's container so you can target it in your jQuery, e.g. <div id="Menu2Container">

  2. Hide your Menu2 container in the jQuery when the page loads

  3. Add an event handler for change events on #Menu1 to detect when an option is selected.

  4. In the handler, get the value of the selected option using val()

  5. If "Yes" is selected, show() the #Menu2Container, otherwise hide() it

Working Example:

$("#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>

Note: I would suggest considering if the grid col is the best container to hide for the menu - this obviously depends on your layout, but showing and hiding the col will affect the grid layout and could affect the overall appearance.

Upvotes: 3

dale landry
dale landry

Reputation: 8610

Vanilla Javascript:

You can use an event listener to change the visibility to visible.

Set a conditional in your event handler and set the handler to change, check to see if the value of the target of your event listener is set to the desired value Yes, if it is, then set the div to visible...

I did add an ID to your DIV to target it directly...

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>

Upvotes: 1

Related Questions