Posted By
Bajarangi soft ,
Posted On 16-01-2021
Step 1:Create index.html and implement below html code in it.
<div class="container">
<div class="row justify-content-center" id="main">
<div class="col-md-6">
<h2>On Change Hide And Show Div</h2>
<form class="business_form contactusform" method="post" id="business_form" action="">
<div class="form-group row">
<label>select Type</label>
<br>
<select name="type" id="types" class="form-control">
<option selected disabled>Select Type</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
</div>
</form>
<div class="type1_div" style="display: none">
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
</div>
<div class="type2_div" style="display: none">
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$('#types').on('change', function() {
var val = $(this).val();
if(val == '1'){
$('.type1_div').show();
$('.type2_div').hide();
}
else{
$('.type1_div').hide();
$('.type2_div').show();
}
});
});
<html>
<head>
<title>On Change Hide And Show</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main class="py-4" style="margin-top: 80px">
<div class="container">
<div class="row justify-content-center" id="main">
<div class="col-md-6">
<h2>On Change Hide And Show Div</h2>
<form class="business_form contactusform" method="post" id="business_form" action="">
<div class="form-group row">
<label>select Type</label>
<br>
<select name="type" id="types" class="form-control">
<option selected disabled>Select Type</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
</div>
</form>
<div class="type1_div" style="display: none">
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
</div>
<div class="type2_div" style="display: none">
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
</div>
</div>
</div>
</main>
<script>
$(document).ready(function () {
$('#types').on('change', function() {
var val = $(this).val();
if(val == '1'){
$('.type1_div').show();
$('.type2_div').hide();
}
else{
$('.type1_div').hide();
$('.type2_div').show();
}
});
});
</script>
</body>
</html>