Change the value of the text field based on the choice of input with the selected attribute

Question

I am trying to change the value of text input based on a user choosing a value from a drop-down list. It works for me using the following,

<script type="text/javascript"> $(document).ready(function() { $("#name").live("change", function() { $("#firstname").val($(this).find("option:selected").attr("value")); }) }); </script> <select id="name" name="name"> <option value="">Please select...</option> <option value="Elvis">Elvis</option> <option value="Frank">Frank</option> <option value="Jim">Jim</option> </select> <input type="text" id="firstname" name="firstname" value="" readonly="readonly"> 

It all works great. What I'm trying to achieve now is that the pre-selected item is displayed by default when the user re-visits the form if they want to change their selection. At the moment, select the default value "Please select ...". In any case, should they be forced to choose to display the value from the text input when the page loads?

thanks

Chris

Answer 1

Try it,

 $(document).ready(function() { $("#name option").filter(function() { return $(this).val() == $("#firstname").val(); }).attr('selected', true); $("#name").live("change", function() { $("#firstname").val($(this).find("option:selected").attr("value")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <select id="name" name="name"> <option value="">Please select...</option> <option value="Elvis">Elvis</option> <option value="Frank">Frank</option> <option value="Jim">Jim</option> </select> <input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly"> 

Answer 2

 $(document).ready(function() { $(document).on("change", "#name", function() { $("#firstname").val( this.value ); // this.value is enough for you }).val( $('#firstname').val() ).change(); // for pre-selection trigger }); 

Note

Instead of .live() use .on() with jQuery 1.7+ because live() deprecated.

The syntax .on() for handling delegate events is:

 $(StaticParent).on( eventName, target, handlerFunction ); 

Where StaticParent means the non-dynamic parent container of the target element to which you want to bind the event.

So, for the above case, it would be better to use any static parent element #name instead of document .

Answer 3

Try: http://jsfiddle.net/ufomammut66/mw4dY/

Basically onload I just select a parameter by value, set it to the selected one, and then raise a change event. Your change event takes care of the rest.

 $(document).ready(function() { $("#name").live("change", function() { $("#firstname").val($(this).find("option:selected").attr("value")); }); $('#name option[value=Frank]').attr('selected','selected').change(); }); 

Answer 4

Paste this code on $(document).ready

 $("#name").val($("#firstname").val()); 

Answer 5

 $(document).ready(function() { $("#name").live("change", function() { $("#firstname").val($(this).val()); }) }); ​ 

Answer 6

 $('#name').val($('#firstname').val()); 

Answer 7

To remember the values ​​of the form, you can use the cookie functions :

 $(document).ready(function() { var value = readCookie('fname'); if (value) { $("#firstname").val(value); $('#name option[value="'+value+'"]').prop('selected', true); } $("#name").on("change", function() { var value = $(this).find("option:selected").attr("value"); $("#firstname").val(value); createCookie('fname',value,31); }); }); function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } 

jsfiddle - if you go to this page, the name will be canceled, as on the page.