Question

I got this code on here recently

<script type='text/javascript'>
 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });
</script>

The aim being to hide a drop down box depending on whether the radio buttons yes and no were selected. Here is my code:

<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="Yes" value="Yes" />Yes
  <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  
     <select class="purple" name="discountselection" id="discountselection">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>

I have the javascript placed in between the head tags, but for some reason this just isn’t working for me. I’m not familiar with javascript at all. If any one could see where I am going wrong this would be a big help.
Thanks.

Answer 1

your code is fine, you just need to wrapped it with the ready handler.

like this,

$(function() {
    $('#discountselection').hide();

    $('#No').click(function() {
        $('#discountselection').hide();
    });

    $('#Yes').click(function() {
        $('#discountselection').show();
    });
});​

you could also shorten your codes like this,

$(function() {
    $('#discountselection').hide();
    $('#Yes, #No').click(function() {
        $('#discountselection').toggle(this.value==='Yes');
    });
});​