Reputation:
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.
<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
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
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
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:
First give a class or id to #Menu2's container so you can target it in your jQuery, e.g. <div id="Menu2Container">
Hide your Menu2 container in the jQuery when the page loads
Add an event handler for change events on #Menu1
to detect when an option is selected.
In the handler, get the value of the selected option using val()
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
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