<select> Jquery Click not working in IE7,IE8 and Safari

I have this JavaScript code:

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

        $("#no-option").click(function() { 
           开发者_StackOverflow $("#additional-info").html('');
        },
        function() {}
        );      
        $("#military-option").click(function() { 
            $("#additional-info").append('<label>Current Employer:</label><input type="text" name="currentemployer" class="textfield" /><br /><label>Role:</label><input type="text" name="role" class="textfield" /><br /><label>Total Hours:</label><input type="text" name="totalhours" class="textfield" /><br />');
        },
        function() {}
        );
        $("#corporate-option").click(function() { 
            $("#additional-info").append('<label>Current Employer:</label><input type="text" name="currentemployer" class="textfield" /><br /><label>Role:</label><input type="text" name="role" class="textfield" /><br /><label>Total Hours:</label><input type="text" name="totalhours" class="textfield" /><br />');
        },
        function() {}
        );
        $("#uav-option").click(function() { 
            $("#additional-info").append('<label>Write a brief description of UAV Experience:</label><textarea name="briefdescription" cols="" rows="" class="textarea"></textarea>');
        },
        function() {}
        );

  });
</script>

And the HTML part:

<select name="interest" class="validate[required] dropdown">
    <option value="" id="no-option" selected="selected">- Please Select -</option>
    <option value="Military" id="military-option">Military</option>
    <option value="Private/Corporate" id="corporate-option">Private/Corporate</option>
    <option value="UAV" id="uav-option">UAV</option>
</select>

This is working perfectly in FF and IE9. Someone can help me fix this issue for IE7/8?

Not possible. Legacy IE versions do not recognize option click events. You will have to use the select change event instead.

e.g

$('#interest').change( selectChange );

function selectChange(){

  var selectedValue = $(this).val();

  switch (selectedValue){

     case 'Military':
       //do something
       break;

     case 'Private/Corporate':
       //do something else
       break;

  }

}

IE7/8 do not working properly with the "click" event on options. You can use the "change" event like this:

$(document).ready(function() {
    $("#interest").change(function(){
        switch ($(this).val()){
            case 'Military': 
                $("#additional-info").append('<label>Current  Employer:</label><input type="text" name="currentemployer"  class="textfield" /><br  /><label>Role:</label><input type="text" name="role"  class="textfield" /><br /><label>Total  Hours:</label><input type="text" name="totalhours"  class="textfield" /><br />');
                break;
            case 'Private/Corporate':
                $("#additional-info").append('<label>Current  Employer:</label><input type="text" name="currentemployer"  class="textfield" /><br  /><label>Role:</label><input type="text" name="role"  class="textfield" /><br /><label>Total  Hours:</label><input type="text" name="totalhours"  class="textfield" /><br />');
                break;
            case 'UAV':
                $("#additional-info").append('<label>Write  a brief description of UAV Experience:</label><textarea  name="briefdescription" cols="" rows=""  class="textarea"></textarea>');
                break;
        }
    });                                    
});

You can test it here http://jsfiddle.net/sWEdd/4/