title: Show a textbox on drop down select
body: <p>I tried doing onchange and onclick event and I'm having trouble with both of them. When executing my code, Firebug tells me my showTextBox function is not defined.</p>
  
  <p>When the value 1 is selected for the State dropdown, I need to display the <code>&lt;div&gt;</code> which holds a textbox. I'm moved the onclick attribute in the option tags as well as tried onchange attribute and still get showTextBox() is not defined in Firebug.</p>
  
  <pre><code>&lt;select id="AddrType" onclick="showTextBox();"
          height="30px" style="width: 90px"&gt; 
    &lt;option value="10"&gt;&lt;/option&gt;
    &lt;option value="0"&gt;City&lt;/option&gt;
    &lt;option value="1"&gt;State&lt;/option&gt;
    &lt;option value="2"&gt;Zip&lt;/option&gt;
  &lt;/select&gt;   
  
   &lt;br /&gt;
  
   &lt;div id="stateText" style="visibility: hidden"&gt;
     State &lt;input type="text" id="STATE"/&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is the function that called when either the onclick or onchange events are triggered:</p>
  
  <pre><code>function showTextBox() {
      console.log("in check Drop down");
      if ($('#AddrType').val() == 'State') {
          $('#stateText').style.visibility = 'visible';
      }
      console.log($('#AddrType').val());
  </code></pre>
  
  <p>Any help with this. I've Googled it, but I can't seem to find something that works. I can't use the <code>document.getElementById()</code> function.</p>