How to populate a textbox with value of country dropdown each time user makes a selection?

Question

I have an issue related to an HTML page. Hoping that someone could help resolve it -

I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box. This will happen each time the User changes the country. All of the data is present in the page itself, and no server calls are made to fetch the data.

Could this be done using the delegate method? Can I also use Ajax in this case?

Any help would be very much appreciated.

Many thanks in advance!!

Answer 1

By using Jquery

Try this

HTML

<select id="c_code">
    <option value="IN">India</option>
    <option value="US">USA</option>
</select>
<input id="code" type="text">

Script

$('#c_code').on('change',function(){
   $('#code').val($(this).val());
});

DEMO

Answer 2

You simply need to bind the logic to the change event of select

Here is the html code

    <select id="ddl">
    <option value="001">India</option>
    <option value="002">USA</option>
</select>

<input type="text" id="txt" />

Here is the jQuery

    $('#ddl').change(function(){
    $('#txt').val($('#ddl').val());
});

Here is the demo