title: JavaScript append a select menu option to a div tag
body: <p>As a complete novice in JavaScript I figured out how to make the number of the selected objects from a drop down menu appear in a <code>&lt;div&gt;</code>. But I'm trying to figure out how to make the text selected in the drop menu appear in a <code>&lt;div&gt;</code>.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  window.onload = function() {
      var eSelect = document.getElementById('question1');
      var optOtherReason = document.getElementById('displayresponse');
      eSelect.onchange = function() {
          if(eSelect.selectedIndex === 2) {
              optOtherReason.style.display = 'block';
  
              var li = document.createElement("li");
              li.innerHTML = eSelect.selectedIndex;
              var ul = document.getElementById("appendedtext");
              ul.appendChild(li); 
  
          } else {
              optOtherReason.style.display = 'none';
          } 
      } 
  }  
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;body&gt;
  &lt;select id="question1" name="question"&gt;
      &lt;option value="x"&gt;Reason 1&lt;/option&gt;
      &lt;option value="y"&gt;Reason 2&lt;/option&gt;
      &lt;option value="other"&gt;Other Reason&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="displayresponse" style="display: none;"&gt;Response here&lt;/div&gt;
  &lt;ol id="appendedtext"&gt; &lt;/ol&gt;
  </code></pre>
  
  <p></p>