Show Text Field Using Select Option in JQuery

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