0

我有一些在 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 开发者工具,但无济于事。

4

2 回答 2

1

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

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

于 2013-07-23T17:33:58.813 回答
0

IE 不仅会让你隐藏选项。

也许您可以改为禁用该选项:

.prop('disabled', true);
于 2013-07-23T17:35:46.527 回答