Show Text Field Using Select Option in JQuery
Show Text Field Using Select Option in JQuery
Published Nov 27,2020 by Kailash Singh
0 Comment 1084 Views
In this tutorial, we are going to create how to create show text field using select option in JQuery.
Step 1: Include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Complete Code :-
<!DOCTYPE html>
<html>
<head>
//these two links for design
<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>
//this link for JQuery work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Show Text Field Using Select Option in JQuery</h2>
<select id="count" class="form-control">
<option value="0">---Select---</option>
<option value="1">Html</option>
<option value="2">PHP</option>
</select>
<div class="one" style="display: none;">
<h3>HTML</h3>
<p>HTML is the standard markup language for Web pages. With HTML you can create your own Website.</p>
</div>
<div class="two" style="display: none;">
<h3>PHP</h3>
<p>PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP 7 is the latest stable release.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#count').change(function(){
var count = $('#count').val();
if(count == '1'){
$('.one').show();
$('.two').hide();
}
else if(count == '2')
{
$('.one').hide();
$('.two').show();
}
else if(count == '0')
{
$('.one').hide();
$('.two').hide();
}
});
});
</script>
</body>
</html>
Hope this will help our developers
Click to Join
