How do I change the value of a text box based on value of a select box?

Question

I've searched online and this website alike for a simple and adaptable solution but alas, no joy.

The desired process:

1. The user selects an <option> from a <select> list. e.g. a name.
2. The value of a read-only text box automatically populates based on the selected <option>. e.g. a phone number corresponding to the name.
3. Finally, both the <select> box and text box must each have their own values. i.e. a name and a phone number respectively.

The basic mark up:

When this changes, update the value of my text box:

<select id="name" name="name">
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>

Value contingent on the value of above box:

<input type="text" id="phonenumber" name="phonenumber" value="">

My question:

How do I achieve this using jQuery or regular Javascript? Please answer this from the perspective of a client side novice.

The solution (thanks to corroded):

I added the following to the head of my document:

 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">  
 $(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#phonenumber").val($(this).find("option:selected").attr("data-phonenumber"));
    })
 });                                     
 </script>

...and the following to the body of my document:

<select id="name" name="name">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111">Elvis</option>
<option value="Frank" data-phonenumber="22222">Frank</option>
<option value="Jim" data-phonenumber="33333">Jim</option>
</select>

<input type="text" id="phonenumber" name="phonenumber" value="" readonly="readonly">

For more information on the use of data-somename as an attribute, as suggested by corroded, refer to the following links:

http://ejohn.org/blog/html-5-data-attributes/

http://blogs.sitepoint.com/rel-not-a-custom-attribute/

Answer 1

add a "data-phone-number" value on your options:

<option value="Elvis" data-phone-number="77777">Elvis</option>

in your jquery:

$("#name").live("change", function() {
  $("#phonnumber").val($(this).find("option:selected").attr("data-phone-number"));
})

refactor as needed :)

Answer 2

I would do something like:

<select id="name" name="name">
  <option value="0123456789">Elvis</option>
  [...]
</select>

and then

$('#name').change(function(){
  var thisphone = $(this).val();
  $('#phonenumber').val(thisphone);
});

or

$('#name').change(function(){
  $('#phonenumber').val($(this).val());
});

depending on how you want to work with your variables

Answer 3

You can try this.

$('#name').change(function(){
    $('#phonenumber').val($(this).val());
});

If you would like it to display the phone number just set up your HTML to have the value of each option be the phone number. For instance.

<option value="5555555555">Frank</option>

Answer 4

You can also do this without tying the select box and the phone numbers so tightly together. Use JSON notation to set up objects that hold all of your person's info, such as:

<script type="text/javascript">
    var people = {
        Elvis:  {
            phone: "555-5555"
            },
        Frank: {
            phone: "123-4567"
            },
        Jim: {
            phone: "987-6543"
            }
        };

    window.onload = function() {
        var list = document.getElementById("name");
        list.onchange = function() {
            document.getElementById("phone").value = people[this.value].phone;
        }   
    }
</script>

Basically, we're just creating three objects, "Elvis", "Frank" and "Jim" inside a bigger object called "people". Each object has a phone property that you can access with the dot notation, as I've done (i.e. people["Elvis"].phone), or the array notation (i.e. people.Elvis["phone"]]).

To make things easy, I am using the "this" keyword since when called from within the "onchange" event handler, it refers to the object that fired the event -- the select box. So "this.value" refers to the value on the select box.

Now your select stays pretty simple:

<select id="name" name="name">
    <option value="Elvis">Elvis</option>
    <option value="Frank">Frank</option>
    <option value="Jim">Jim</option>
</select>

<br />
<input type="text" id="phone" />