JQuery show/hide options from one select drop down, when option on other select dropdown is slected
for hide option value on other select dropdown
$("select_element").children("option[value^='Middle']").hide();for show option value on other select dropdown
$("select_element").children("option[value^='Middle']").show();Example :
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<p>jQuery show/hide options from one select drop down, when option on other select dropdown is slected</p>
<p>Example:</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="option" class="col-form-label">Option:</label>
<select class="form-control input-mode" required="" id="option" name="option">
<option value="">Select </option>
<option value="Home">Home</option>
<option value="Search">Search</option>
<option value="Category">Category</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="placed" class="col-form-label">Placed:</label>
<select class="form-control input-mode" required="" id="placed" name="placed">
<option value="">Select Placed </option>
<option value="Top">Top</option>
<option value="Middle">Middle</option>
<option value="Bottom">Bottom</option>
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#option').on('change', function() {
val = $(this).val();
// select on change show all option
$("#placed").children('option').show();
// on change if value home than hide Middle option
if(val =="Home"){
$("#placed").children("option[value^='Middle']").hide();
}
// on change if value search than hide Middle, top option
if(val =="Search"){
$("#placed").children("option[value^='Middle'],option[value^='Top']").hide();
}
});
});
</script>
</body>
</html>
Tags
Leave a comment
Comments
Master Your Time with the 80/20 Rule: A Simple Guide
Master Your Time with the 80/20 Rule: A...
Get Control of Your Time: 6 Easy Ways to Do More
Get Control of Your Time: 6 Easy Ways...
10 Inspiring Success Stories of Indian Entrepreneurs in 2025
India’s startup space is booming in 2025....
10 Inspiring Success Stories of Indian Entrepreneurs in 2025
India breeds dreamers who build empires....
Overthinking: How to Break Free from the Cycle of Mental Overload
We’ve all been there—thinking about the...
Custom 404 Page In Laravel 8
Following steps that help you to customize...
8 powerful brain-training apps and games
In today’s world, mental agility is a...
Simple Ways to Step Out of Your Comfort Zone and Grow
Step Out of Your Comfort Zone: 10 Powerful...
How to optimize User experience with Good content
Whenever you visit a website or access any...