title: How to get select value in javascript?
body: <p>Below is my code. I want the div to appear when it is selected, however, when I press submit, the word <code>undefined</code> appears instead of the words I want it to be.</p>
  
  <p>When I use <code>=</code> instead of <code>==</code>, e.g. <code>if(age="toddlers")</code>, the sentence <code>"Bring to picnic"</code> appears for all selected options.</p>
  
  <p>Hence, I'm suspecting that it's because I'm not reading the value correctly. I tried </p>
  
  <pre><code>if (document.getElementsByTagName('option') == "toodlers")
  </code></pre>
  
  <p>and it's totally not working. I just started learning HTML, CSS and JS. I tried googling for a few hours and I still cannot fix it.</p>
  
  <pre><code>&lt;form name="outing"&gt;
  &lt;select id="outing"&gt;
  &lt;option value="toddlers"&gt;Toddlers&lt;/option&gt;
  &lt;option value="children"&gt;Children&lt;/option&gt;
  &lt;option value="teenagers"&gt;Teenagers&lt;/option&gt;
  &lt;option value="adults"&gt;Adults&lt;/option&gt;
  &lt;option value="eldery"&gt;Elderly&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="button" name="button" value="Go!" onClick="familyOuting();"&gt;
  &lt;input type="reset" value="Reset" onClick="window.location.reload()"/&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
      function familyOuting(){
          var age = document.getElementById("outing").selectedIndex;
          if(age=="toddlers"){
              var place = "Bring to picnic";
          }
          if(age=="children"){
              var place = "Bring to playground";
          }
          if(age=="teenagers"){
              var place = "Bring to swimming pool";
          }
          if(age=="adults"){
              var place = "Bring to dinner";
          }
          if(age=="elderly"){
              var place = "Bring to picnic";
          }
          document.getElementById("xxx").innerHTML=(place);
      }
  &lt;/script&gt;
  &lt;div id="xxx"&gt;
  </code></pre>