Question

When a certain value from a drop-down box is selected, I want another section of the form to be shown using jQuery’s show() function. Currently, my code above the header looks like this:

<script>   
    $(":input#location").change(function(){
      if($(this).val() === 'On Rental'){
        $('div#dpo').show("slow");
      }
    }
</script>

And, the form is coded like this:

<p>
    <strong><label for="location">Location</label></strong>
</p>
<select name="location" id="location">
    <option value="Clarksville">Clarksville</option>
    <!--etc.-->
</select>

<div id="dpo" style="display:none">
  <!--Stuff I want to show here.-->
</div>

For some reason, nothing happens when I select “On Rental” from the drop-down field, and I can’t for the life of me figure out what I’m doing wrong. Can anyone see what I’m doing wrong?

Answer 1

I tried all of the suggestions above (including wrapping it in the document.ready function), but I couldn’t get it to work . I eventually got the code to work (as I originally had it) when I placed at the bottom of the document, rather than in the header. I don’t know enough about JavaScript and jQuery to know why that would be…?