hide/show jquery not working in IE

Question

I have a select menu that shows/hides the "livetransopts" div when an option is clicked. Works fine in Firefox, Chrome etc but not in IE can anyone help me????

  <select>
    <option class="hidelivetrans" value="No">No - Don't transfer the call</option>
                <option class="showlivetrans" value="Yes">Yes - Transfer the call</option>
              </select>
              </div>
              </div>
              <!--Live transfer yes/no field-->

              <script type="text/javascript">
              $(document).ready(function() {
                    $('.livetransopts').hide();

      $(".showlivetrans").click(function(){
                            $(".livetransopts").show('slow');           
                                        });
       $(".hidelivetrans").click(function(){
                            $(".livetransopts").hide('slow');           
                                        });
    });
              </script>

              <!--live trans opts-->
              <div class="livetransopts">
    <!--content here-->
    </div>

Answer 1

The right way to do it would bind a "change" event to

$(function(){

  var myDiv = $(".livetransopts");


  $("select").change(function(){
    if (this.value=="Yes")
       myDiv.show('slow');
    else
        myDiv.hide('slow'); 
  });

});