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
Simple Ways to Step Out of Your Comfort Zone and Grow
Step Out of Your Comfort Zone: 10 Powerful...
How Mobile Reels Are Harming Children & What Parents Can Do
Is Mobile Reels Harming Our Children? Here's...
Simple body language tricks
Simple body language tricks1. Stand with...
Best Free Websites to Learn Coding - Top Resources for Beginners & Experts
Best Free Websites to Learn CodingIf you...
How to change timezone in laravel 8
In this tutorial, i would like to share with...
How to generate dynamic real time sitemap.xml file in Laravel 8
The following steps help you to create a...
Integrate Zoho SMTP Mail Configurations in Laravel?
The integration zoho mail in Laravel....
The 7 Habits of Highly Effective People
The 7 Habits of Highly Effective...
How to optimize User experience with Good content
Whenever you visit a website or access any...