title: Get value selected in dropdown list using Javascript (displays null)
body: <p>I need to access the value selected from a drop down list using Javascript. But every time I get 'null' as the answer though a list item is selected.</p>
  
  <p>My HTML page:</p>
  
  <pre><code>&lt;select class="mySelect"&gt;
      &lt;option value="st1" selected="selected"&gt;Create new Stream&lt;/option&gt;
      &lt;option value="st1"&gt;Stream 1&lt;/option&gt;
      &lt;option value="st2"&gt;Stream 2&lt;/option&gt;
      &lt;option value="st3"&gt;Stream 3&lt;/option&gt;
      &lt;option value="st4"&gt;Stream 4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type="button" value="show attributes" class="panel-button-attr" onclick="choice()"&gt;
  </code></pre>
  
  <p>When the above button is clicked, the selected value should be alerted to the user. So in my Javascript function:</p>
  
  <pre><code>function choice() {
  
      var choice=document.getElementById("mySelect");
      alert(choice);
      var strUser = choice.options[choice.selectedIndex].text;
      alert(strUser.toString());
  
  }
  </code></pre>
  
  <p>Here, I've tried to use the first alert to check if any selected list item is identified correctly. But, at this point, it displays null and the strUsr line doesn't run at all. </p>
  
  <p>I know this is actually a trivial task but am finding it hard to figure this inconsistency.        </p>