Question

我的代码在firefox中运行完美，并在IE中出错。有任何想法吗？

我有一个包含各种选项的下拉列表，我试图根据所选值显示/隐藏另一个下拉列表中的选项。

function selectNames() {
var Name = $("#SelectName").attr("value");
 $("."+Name).each(function() {
   $(this).hide();            
 });
}

<select >
   <option class="Name1" value="SomeName1" </option>
   <option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
   <option value="Name1" </option>
   <option value="Name2" </option>
</select>

感谢任何帮助..

Answer 1

确保关闭开始标记。试着用这个：

<select>
    <option class="Name1" value="SomeName1" />
    <option class="Name2" value="SomeName2" />
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
    <option value="Name1" />
    <option value="Name2" />
</select>

Seems to work for me in IE8

Answer 2

它不适用于IE＆amp; Chrome

check out in IE or Chrome

你可以做的最好的选择是删除选项而不是隐藏它。（你应该在删除之前保留原始选项的副本。）

var copy = $("."+Name).clone();
function selectNames() {
   $("#thefirstselect option").remove();
   copy.appendTo("#thefirstselect");
   var Name = $("#SelectName").val();

   $("."+Name).each(function() {
      $(this).remove();            
});
}

Answer 3

您的加价不正确。你是每个选项开放标签没有正确关闭。

此外，规范并未指定对各个选项标签的CSS更改，但它适用于Firefox。

简单来说，你无法隐藏个人输入 - 在这种情况下，你必须删除它们。

Answer 4

如果这是直接复制和粘贴，那么您需要关闭选择选项，如下所示：

<option value="Name1">Name1</option>
<option value="Name2">Name2</option>

Answer 5

我建议您显示和隐藏两个选择。显示和隐藏选项听起来很冒险。

另外，请确保将隐藏的选择设置为attr('disabled','disabled') / disabled="disabled"，然后在取消隐藏时将其撤消removeAttr('disabled')。这是为了防止隐藏的选择在具有相同name="..."的多个选择时将数据发布到服务器。

如果您必须使用单个选项，则可能需要appendTo / remove选项，但这取决于您。如果show / hide适用于所有浏览器，请选择它。

Answer 6

可悲的是，你不能 IE不支持在选择中隐藏单个选项，无论是Chrome还是Opera。此功能不是跨浏览器。

您可以做的是删除该选项并稍后再添加...

hide（）无法在IE中运行

6 个答案: