title: Showing the value of a selected option rather than the text in a html select
body: <p>I have a <code>select</code> with all options following this format (a,b,c,d).<br>
  E.g. '1000, Balance, 0, 4'.<br>
  The dropdown menu (which is actually in some cases a popup window with a searchable/filterable list) should show the options as shown in the above example, but when an option has been selected, the actual <code>select</code> box should only show the first value.<br>
  E.g. '1000'.<br>
  How would you go about doing this? I'm using javaScript and jQuery along with the html. Don't worry about extracting the right value to show, I basically just want to know how to set the shown value to something else than the actual value.</p>
  
  <p>I have a method that returns the value I want to display (e.g. '1000'), so I would like to do something similar to  </p>
  
  <pre><code>$("#selectID").val("1000");
  </code></pre>
  
  <p>The options are added like this:  </p>
  
  <pre><code>for (var i = 0; i &lt; this.dataTable().Rows().length; i++) { 
          var option = document.createElement("option");
          option.text = this.getDataTableText(this.dataTable().Rows()[i]).replace(/\s{2,}/g, '');
          option.value = this.getDataTableText(this.dataTable().Rows()[i]).replace(/\s{2,}/g, '').split(",")[0];
          sel.options.add(option, (i)); 
      }
  </code></pre>
  
  <p>So I would just like to set the shown value to the value of the option rather than the text.</p>