title: Show and hide html element on selected option change
body: <p>In a JSP page, I have a dropdown list. When the first element of the list is selected, I want a text area to show right on click. I'm new to Javascript/Jquery, so I'm obviously missing something in the function (the text area never shows up). Hope someone can help.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;tr class="odd gradeX"&gt;
      &lt;td class="col-lg-3"&gt;
          &lt;div&gt;
              &lt;label&gt;Show text area&lt;/label&gt;
              &lt;select id="show" class="form-control" name="show_text_area" onchange="change()"&gt;
                  &lt;option value="1"&gt;YES&lt;/option&gt;
                  &lt;option value="0"&gt;NO&lt;/option&gt;
              &lt;/select&gt;
  
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="col-lg-3"&gt;
          &lt;div&gt;
              &lt;label&gt;Text area&lt;/label&gt;
              &lt;textarea id="text_area" class="form-control" type="text" name="text_area" placeholder="Write something" rows="5" cols="50" style="display: none"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is the function, on top of the JSP:</p>
  
  <pre><code>&lt;script&gt; function change() {
      var selectBox = document.getElementById("show");
      var selected = selectBox.options[selectBox.selectedIndex].value;
      var textarea = document.getElementById("text_area");
      if(selected === '1'){
          textarea.show();
      }
      else{
          textarea.hide();
      }
  });&lt;/script&gt;
  </code></pre>