<select> Jquery单击不在IE7,IE8和Safari中工作</select>

时间:2011-04-21 09:18:36

标签: jquery internet-explorer click

我有这个JavaScript代码:

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

        $("#no-option").click(function() { 
            $("#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>

HTML部分:

<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>

这在FF和IE9中完美运行。有人可以帮我修复IE7 / 8的这个问题吗?

2 个答案:

答案 0 :(得分:5)

不可能。旧版IE版本无法识别选项单击事件。您将不得不改为使用select change事件。

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;

  }

}

答案 1 :(得分:1)

IE7 / 8与选项上的“click”事件无法正常工作。您可以像这样使用“更改”事件:

$(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;
        }
    });                                    
});

你可以在这里测试一下 http://jsfiddle.net/sWEdd/4/