title: Getting an option text/value with JavaScript
body: <p><strong>Answer</strong>: <code>var option_user_selection = element.options[element.selectedIndex].text</code></p>
  
  <p>I am trying to build a form that fills in a person's order.</p>
  
  <pre><code>&lt;form name="food_select"&gt;
      &lt;select name="maincourse" onchange="firstStep(this)"&gt;
          &lt;option&gt;- select -&lt;/option&gt;
          &lt;option text="breakfast"&gt;breakfast&lt;/option&gt;
          &lt;option text="lunch"&gt;lunch&lt;/option&gt;
          &lt;option text="dinner"&gt;dinner&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>What I'm trying to do is send in the select object, pull the name and the text/value from the option menu AND the data in the option tag. </p>
  
  <pre><code>function firstStep(element) {
      //Grab information from input element object
      /and place them in local variables
      var select_name = element.name;
      var option_value = element.value;
  }
  </code></pre>
  
  <p>I can get the name and the option value, but I can't seem to get the text="" or the value="" from the select object. I only need the text/value from the option menu the user selected. I know I can place them in an array, but that doesn't help</p>
  
  <pre><code>var option_user_selection = element.options[ whatever they select ].text 
  </code></pre>
  
  <p>I also need to use the passed in select reference as that is how it's set up in the rest of my code. </p>
  
  <p>Later on, that text/value is going to be used to pull the XML document that will populate the next select form dynamically. </p>