Hide a textbox and label on dropdown select using Jquery

Here is a sample code on how to hide a text field and its label on dropdown select. See the inline comments for description of each line.


//the "select" drop down has the class name "account_type_class"
//ex. <select id="account-type" class="account_type_class" >	
$("select.account_type_class").change(function(){	

 //get the selected value. This is the "value" set in jsp
 //assigned to an "option"
 //ex. <option id="a-type_business" value="business">Business</option>		
 var value = $(this).val();

 if(value === "business"){
   
   //This code shows the label 
   $('label[for="cust_name"]').show();
   //This code shows the textbox
   $("#c-name").show();
 }
		
 //in this case, we hide the label and text box
 if(value === "personal"){
   $('label[for="cust_name"]').hide()
   $("#c-name").hide();
 }

Here’s the JSP code snippet.

<label>Account Type
<select id="account-type" class="account_type_class" >
  <option id="a-type_business" value="business">Business</option>
  <option id="a-type_personal" value="personal">Personal</option>
</select></label><br/><br/>
<label>Account Name <input type="text" name="accountname" id="s-name"></label><br/><br/>
<label for="cust_name">Customer Name <input type="text" name="customername" id="c-name"></label><br/><br/>

jquery-1.11.3.min.js version is used.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s