Question

我有一些代码在Firefox中完美运行，但在IE中却没有。期望的解决方案是在用户选择单选按钮之后，将显示包含与单选按钮类别相关的选项的下拉列表。但是，当前使用IE时，当用户选择一个单选按钮时，它会显示下拉菜单，但会包含所有选项，包括与未选中的单选按钮相关的选项

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tools</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="infratool.js"></script>

</head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header" style="background-color:#7BD12E">
<h1 align="Center" style="color:#FFF;"></h1>
<!-- end #header --></div>
<form id="form1" name="form1" method="post" action="">
<table width="392" border="0">
<tr>
<td align="center">
<label><input name="Radio1" type="radio" id="Radio1" value="Radio1" onclick="showSelect();" />Radio1</label>
<label><input name="Radio2" type="radio" id="Radio2" value="Radio2" onclick="showSelect();" />Radio2</label>
<input type="radio" name="Radio3" id="Radio3" value="Hidden" style="display:none" checked="checked" />
</td>
</tr>
<tr>
<td align="center">&nbsp;</td>
</tr>
</form>
<div id="div-id" align="center"><select name="Category" id="Category" class="hide">
<option value=" Radio1 Radio2" selected="selected">--</option>
<option value="1 Radio1">1</option>
<option value="2 Radio1">2</option>
<option value="3 Radio1">3</option>
<option value="4 Radio2">4</option>
<option value="5 Radio2">5</option>
<option value="6 Radio2">6Domain</option>
</select><input type="submit" value="Go" id="submit"/>
</div>
</table>
</div>
</body>
</html>

虽然这是我的java脚本

//Show Select option after clicking Radio button:
function showSelect() {
var select = document.getElementById('Category');
select.className = 'show';
}

//Select option, separates the link from Class
$(function(){
var select = $('#Category'),
options = select.find('option');
$('[type="radio"]').click(function(){
var visibleItems = options.filter('[value*="' + $(this).val()  + '"]').show();
options.not(visibleItems).hide();
if(visibleItems.length > 0)
{
select.val(visibleItems.eq(0).val());
}
});
});

$(function() {
$("#submit").hide();
 $("#Category").change(function() {
window.location = $(this).val().split(" ")[0];
if(loc)
window.location.href = loc;
})
});

我尝试使用IE开发人员工具，但无济于事。

Answer 1

您不能只显示/隐藏<option>元素。您必须从下拉列表中删除它们。

我个人建议在页面加载时克隆选择框，然后使用它作为基础重新填充重新过滤原始下拉列表。

Answer 2

IE不会让你隐藏选项。

也许您可以使用以下方法禁用该选项：

.prop('disabled', true);

javascript / jquery无法在IE中运行

2 个答案: