How to change textbox value based on dropdown value selection in jQuery


jQuery Set Textbox value as Dropdown selected value:  Here in this article we learn how to set textbox values based on dropdown list selection. In short, whenever we change our dropdown selection (select option ), its changes value gets set to our textbox. 

Here to set textbox value we use the jQuery val() method, which returns or set the value of forms fields.

Steps to change textbox value based on dropdown selection

  1. Add HTML markups such as textbox and select option
  2. jQuery code to set textbox value same as a selected dropdown list 

Add HTML markups such as textbox and select option

Here we add a dropdown list having id as ddlModel, and input type textbox having id as myTextbox. Our HTML markup looks as written below.

<input type="textbox" id="myTextbox" />
<select id="ddlModel">
 <option value="Iphone">Iphone</option>
 <option value="Samsung">Samsung</option>
 <option value="Sony">Sony</option>
 <option value="Vivo">Vivo</option>

jQuery Code to Set Textbox value as Dropdownlist selected value

Using jQuery change() event, we add a change event on our dropdown list. Then using the jQuery val() method we change the textbox value. 

Our final jquery code is written below:

   var GetValue=$("#ddlModel").val();

View Demo

Conclusion: Here using the jquery val() method we were successfully able to change the textbox value based on dropdown list selection.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

Your email address will not be published. Required fields are marked *