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>
</select>

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:

$("#ddlModel").on("change",function(){
   var GetValue=$("#ddlModel").val();
   $("#myTextbox").val(GetValue);
});

View Demo

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