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.

When the value 1 is selected for the State dropdown, I need to display the <div> 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.

<select id="AddrType" onclick="showTextBox();"
        height="30px" style="width: 90px"> 
  <option value="10"></option>
  <option value="0">City</option>
  <option value="1">State</option>
  <option value="2">Zip</option>
</select>   

 <br />

 <div id="stateText" style="visibility: hidden">
   State <input type="text" id="STATE"/>
 </div>

Here is the function that called when either the onclick or onchange events are triggered:

function showTextBox() {
    console.log("in check Drop down");
    if ($('#AddrType').val() == 'State') {
        $('#stateText').style.visibility = 'visible';
    }
    console.log($('#AddrType').val());

Any help with this. I've Googled it, but I can't seem to find something that works. I can't use the document.getElementById() function.

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.

When the value 1 is selected for the State dropdown, I need to display the <div> 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.

<select id="AddrType" onclick="showTextBox();"
        height="30px" style="width: 90px"> 
  <option value="10"></option>
  <option value="0">City</option>
  <option value="1">State</option>
  <option value="2">Zip</option>
</select>   

 <br />

 <div id="stateText" style="visibility: hidden">
   State <input type="text" id="STATE"/>
 </div>

Here is the function that called when either the onclick or onchange events are triggered:

function showTextBox() {
    console.log("in check Drop down");
    if ($('#AddrType').val() == 'State') {
        $('#stateText').style.visibility = 'visible';
    }
    console.log($('#AddrType').val());

Any help with this. I've Googled it, but I can't seem to find something that works. I can't use the document.getElementById() function.

• javascript
• html
• drop-down-menu
• onclick
• onchange

• I presume in your code you have a closing } for showTextBox? – Phil Commented Mar 5, 2013 at 17:32

2 Answers 2

try this:

<script type='text/javascript'>

  $(document).ready(function(){
       $('#AddrType').change(function(){
           if ($(this).val() == '1') {
               $('#stateText').css({'display':'block'});           
           }
        });
  });


</script>

and update your select to this:

   <select id="AddrType" height="30px" style="width: 90px"> 
     <option value="10"></option>
     <option value="0">City</option>
     <option value="1">State</option>
     <option value="2">Zip</option>
  </select>   

also, this works perfectly fine.

   <select id="AddrType"  onchange="showTextBox()" height="30px" style="width: 90px"> 
      <option value="10"></option>
      <option value="0">City</option>
      <option value="1">State</option>
      <option value="2">Zip</option>
  </select>

and where showTextBox() is:

   function showTextBox(){
        if ($('#AddrType').val() == '1') {
                   $('#stateText').css({'visibility':'visible'});
    }

Your val() is probably returning "1" instead of "State" you're checking against.

Not only on jQuery but also when you POST the form data to a server, the value of AddrType will be the value attribute of the chosen option element ("City / State / Zip" in your case is just the 'caption' of the value).