Question

I’ve got the following code (which you can see in play at http://jsfiddle.net/5dbZx/). I am running jQuery version v1.6.1. For some reason, .show() (and I’ve also tried .toggle()) will not work on this in IE 8 or Safari 5.1 – I’ve tried both in Win XP and 7. It DOES work on FireFox 3.6 and IE 9.

I’ve done some searching, and it appears that .show does in fact work on IE 8, and that something else must be causing the error in this code. But I’m not sure what. Thanks!

<table>
    <tr class="form_row">
        <td class="required_label" id="Example1">
              Example 1:
         </td>
         <td class="input_field">
             <select name="course_type" id="course_type">
                 <option value="" selected="selected"></option>
                 <option value="1" onclick="$('#Example2').show();" >choice 1</option>
                 <option value="2" onclick="$('#Example2').show();" >choice 2</option>
                 <option value="3" onclick="$('#Example2').show();" >choice 3</option>
                 <option value="4" onclick="$('#Example2').hide();" >choice 4</option>
             </select>
         </td>
    </tr>    
    <tr class="form_row" id="Example2" style="display: none;">
        <td class="required_label">
            Example 2:
        </td>
        <td class="input_field">
            <select name="select_statement" id="select_statement">
                <option value=""></option>
                <option value="1">Yes</option>
                <option value="0">No</option>
            </select>
        </td>
    </tr>
</table>

Answer 1

You simply cant place onclick events on select options, it will not trigger in all browsers. Try using the onchange event of the select instead.

$("#course_type").change(function(){
  if ($(this).val() == 4) {
    $("#Example2").hide();
  }
  else {
    $("#Example2").show();
  }
});