我有这个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的这个问题吗?
答案 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/