当选择第一个下拉列表时,我正在尝试动态更新第二个下拉列表中的选项。它在FF,Chrome等工作正常,但在IE 8/9中不起作用,我不明白为什么。这是一个jsFiddle
<div class="custom-field">
<label for="dropdown1">Select country:</label>
<select id="dropdown1" name='properties[country]'>
<option value="USA">USA</option>
<option value="JAPAN">JAPAN</option>
</select>
</div>
<div class="custom-field">
<label for="dropdown2">Select font:</label>
<select id="dropdown2" name='properties[font]'>
<option class="us" value="font1">Font1</option>
<option class="us" value="font2">Font2</option>
<option class="us" value="font3">Font3</option>
<option class="jp" value="font4">Font4</option>
<option class="jp" value="font5">Font5</option>
<option class="jp" value="font6">Font6</option>
</select>
</div>
function showFont(fontOpt){
if (jQuery('#dropdown1').val() === 'USA'){
var showOptions = fontOpt.filter('.us');
} else {
var showOptions = fontOpt.filter('.jp');
}
jQuery('#dropdown2').html(showOptions);
jQuery('#dropdown2').prop('selectedIndex', 0);
}
$(document).ready(function() {
// get the child elements of font dropdown
var fontOptions = $("#dropdown2").children('option');
$("#dropdown2").html('');
showFont(fontOptions);
$('#dropdown1').on("change", function(e){
showFont(fontOptions);
});
});
答案 0 :(得分:4)
$("#dropdown2").html('');
问题出在这条线上。删除此行,您的代码将正常工作。
而不是这个你可以使用
$("#dropdown2").children('option').remove();
答案 1 :(得分:0)
这是您的HTML代码吗?如果是这样,那么您需要将 script ='text / javascript'从 function showFont 添加到最后。这使得计算机将代码读作javascript,而不是我认为你要求它做的HTML。希望这会有所帮助。
答案 2 :(得分:0)
在jquery中注释以下行;
//$("#dropdown2").html('');
它会起作用。
答案 3 :(得分:0)
您可以使用如下的简短方法:
var fontOptions = $("#dropdown2").children('option');
$("#dropdown2").html('');
而不是
var fontOptions = $("#dropdown2").children('option').remove();