title: HTML select - display value attribute in HTML but retain option text
body: <p>I have a list of <code>option</code> states in a <code>select</code> element.</p>
  
  <pre><code>&lt;select&gt;
      &lt;option value="AL"&gt;Alabama&lt;/option&gt;
      &lt;option value="AK"&gt;Alaska&lt;/option&gt;
      &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
      &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I need the browser to display just the abbreviation of the state (which is presently stored in the <code>value</code> attribute) but the opened pull-down menu should still display the full name of the state.  So a user will see and select "Arizona" in the pull-down menu and then the closed pull-down menu would display "AZ".</p>
  
  <p>The first answer to <a href="https://stackoverflow.com/questions/21699172/html-select-show-value-instead-of-text">this question</a> was close, but it replaces the <code>option</code> text with <code>value</code>'s value, so it does not work for me.</p>
  
  <p>I'd like to use JavaScript / JQuery for this, but kudos to any wizard who can do this with just HTML and CSS.</p>
  
  <p>Any ideas on how to make this happen?</p>