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....
Life-Changing Books You Must Read
.marginspace li { margin-bottom:16px}Srimad...
7 Easy Ways to Sleep Better Naturally – No Pills Needed
7 Easy Ways to Sleep Better Without...
How to Check SSD or HDD on Your PC
How to Check SSD or HDD on Your PCAre you...
How to generate dynamic real time sitemap.xml file in Laravel 8
The following steps help you to create a...
How to Overcome Laziness – A Buddhist Perspective
Laziness is not just about lying down and...