title: Change <label> based on <select>
body: <p>I've had a dig through some similar questions (it's not a unique problem) but many only deal with the current label or changing the label to match the selection.</p>
  
  <p>My jQuery skills are pretty average: the functions are fine, but chaining them (and knowing the browser tricks...) is a bit trickier.</p>
  
  <p>What I'm aiming for is:</p>
  
  <ul>
  <li>User selects "Email" or "Web" from the <code>&lt;select&gt;</code> list. </li>
  <li>Based on this selection, we update the <code>&lt;label&gt;</code> of the <code>&lt;input&gt;</code> below and the content of the <code>&lt;span&gt;</code> below it (some help text, which will helpfully show "<a href="http://yourdomain.com/here" rel="nofollow noreferrer">http://yourdomain.com/here</a>" or "stuff@yourdomain.com")</li>
  </ul>
  
  <p>Additionally:</p>
  
  <ul>
  <li>Change the <code>type</code> of the input field to/from <code>type="email"</code> or <code>type="url"</code>. From <a href="https://stackoverflow.com/questions/3541514/jquery-change-input-type">what I can see</a>, this might be troublesome due to IE compatibility? </li>
  <li>The alternative may be to .show()/.hide() two inputs (one of each type) based on the selection instead.</li>
  </ul>
  
  <p><strong>JSFiddle</strong>: <a href="http://jsfiddle.net/ys9Cj/" rel="nofollow noreferrer">http://jsfiddle.net/ys9Cj/</a> (so far: I'm stuck at getting the fields to change. Like I said, not so great with JQuery!)</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>    &lt;label for="method"&gt;How?&lt;/label&gt;
      &lt;select id="method" name="method" required&gt;
        &lt;option name="method"  value="email"&gt;Email&lt;/option&gt;
        &lt;option name="method" value="web"&gt;Web&lt;/option&gt;
      &lt;/select&gt;
      &lt;span class="help-text"&gt;The web, or email?&lt;/span&gt;
    &lt;/label&gt;
  
    &lt;label for="contact"&gt;Email Address&lt;/label&gt; // We want to update this (but not strictly with the value from the &lt;select&gt;
    &lt;input type="email" name="contact" id="contact" value="" maxlength="255"&gt; // and the type here, or otherwise .show() or .hide() this and show an alternative field with a different name=""
    &lt;span class="help-text"&gt;e.g. stuff@yourdomain.com&lt;/span&gt; // and change the contents here
  </code></pre>