title: Dynamically display selected item as an alert when drop down list item changes(Javascript)
body: <p>I am trying to change the values displayed within a division everytime a selected dropdown list item changes. Performing this on a button click is what I've been doing so far, but, I would like to know if this value can be automatically changed with every selection change.</p>
  
  <pre><code>&lt;select id="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>My js function: </p>
  
  <pre><code>function choice() {
  
      var choice=document.getElementById("mySelect");
      var strUser = choice.options[choice.selectedIndex].text;
  
      if(strUser=="Stream 1"){
          alert("You selected Stream 1");
      }
      else if(strUser=="Stream 2"){
          alert("You selected Stream 2");
      }
      else if(strUser=="Stream 3"){
          alert("You selected Stream 3");
      }
      else if(strUser=="Stream 4"){
          alert("You selected Stream 4");
      }
      else {
          alert("Create Stream");
      }
  
  }
  </code></pre>
  
  <p>According to this code, I need to display the alert message without calling the choice(0 function everytime. Instead it should be alerted with every selection change in the drop down list</p>