title: How do I change the value of a text box based on value of a select box?
body: <p>I've searched online and this website alike for a simple and adaptable solution but alas, no joy.</p>
  
  <h1>The desired process:</h1>
  
  <ol>
  <li>The user selects an <code>&lt;option&gt;</code> from a <code>&lt;select&gt;</code> list. <em>e.g. a name.</em></li>
  <li>The value of a <strong>read-only</strong> text box automatically populates based on the selected <code>&lt;option&gt;</code>. <em>e.g. a phone number corresponding to the name.</em></li>
  <li>Finally, both the <code>&lt;select&gt;</code> box and text box must each have their own values. <em>i.e. a name and a phone number respectively.</em></li>
  </ol>
  
  <h1>The basic mark up:</h1>
  
  <p>When this changes, update the value of my text box:</p>
  
  <pre><code>&lt;select id="name" name="name"&gt;
  &lt;option value="Elvis"&gt;Elvis&lt;/option&gt;
  &lt;option value="Frank"&gt;Frank&lt;/option&gt;
  &lt;option value="Jim"&gt;Jim&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Value contingent on the value of above  box:</p>
  
  <pre><code>&lt;input type="text" id="phonenumber" name="phonenumber" value=""&gt;
  </code></pre>
  
  <h1>My question:</h1>
  
  <p>How do I achieve this using <strong>jQuery</strong> or regular <strong>Javascript</strong>? Please answer this from the perspective of a client side novice.</p>
  
  <h1>The solution (thanks to corroded):</h1>
  
  <p>I added the following to the head of my document:</p>
  
  <pre><code> &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;          
   &lt;script type="text/javascript"&gt;  
   $(document).ready(function() {                                       
      $("#name").live("change", function() {
        $("#phonenumber").val($(this).find("option:selected").attr("data-phonenumber"));
      })
   });                                     
   &lt;/script&gt;
  </code></pre>
  
  <p>...and the following to the body of my document: </p>
  
  <pre><code>&lt;select id="name" name="name"&gt;
  &lt;option value="" selected="selected"&gt;Please select...&lt;/option&gt;
  &lt;option value="Elvis" data-phonenumber="11111"&gt;Elvis&lt;/option&gt;
  &lt;option value="Frank" data-phonenumber="22222"&gt;Frank&lt;/option&gt;
  &lt;option value="Jim" data-phonenumber="33333"&gt;Jim&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type="text" id="phonenumber" name="phonenumber" value="" readonly="readonly"&gt;
  </code></pre>
  
  <p>For more information on the use of data-somename as an attribute, as suggested by corroded, refer to the following links:</p>
  
  <p><a href="http://ejohn.org/blog/html-5-data-attributes/" rel="nofollow">http://ejohn.org/blog/html-5-data-attributes/</a> </p>
  
  <p><a href="http://blogs.sitepoint.com/rel-not-a-custom-attribute/" rel="nofollow">http://blogs.sitepoint.com/rel-not-a-custom-attribute/</a></p>