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....
How to use soft delete in Laravel?
commonly, we remove rows from the database...
Get Control of Your Time: 6 Easy Ways to Do More
Get Control of Your Time: 6 Easy Ways...
Simple Ways to Step Out of Your Comfort Zone and Grow
Step Out of Your Comfort Zone: 10 Powerful...
Laravel's .htaccess to remove "public" from URL
Basic .htacess file <IfModule...
Mastering Git: 3 Hidden Commands Every Developer Should Know
Git is like a superhero for coders—it...