javascript - 使用 jquery 选择选项在 IE 中不起作用？

Question

在这里，当我选择男性或女性类别时，我试图根据 #category 选择获取值，以下选择选项应显示相关选项。我所做的满足了我的要求，但这段代码没有在 ie 中不起作用。它显示了 #subcategory 的所有选项，而不是显示 #category 的相应选项。任何帮助都是感激的。

这是我的 fiddle http://jsfiddle.net/JUGWU/8/
注意:在 IE 中检查此链接

HTML:

<select id="category" name="category">
    <option>-select-</option>
    <option value="MEN" id="menu1">MEN</option>
    <option value="WOMEN" id="menu2">WOMEN</option>
    </select>
    <br>
    <select id="subcategory">
        <option></option>
    <option id="Clothing" value="Clothing">Clothing</option>
    <option id="Accessories" value="Accessories">Accessories</option>
    <option id="Footwear" value="Footwear">Footwear</option>
    <option id="Watches" value="Watches">Watches</option>
    <option id="Sunglasses" value="Sunglasses">Sunglasses</option>
    <option id="Bags" value="Bags">Bags</option>
    </select>

JQuery:

$(document).ready(function(){
$("#category").change(function() {
   var xyz = $("option:selected").attr("id");
     alert(xyz);
    $("#subcategory option").prop('disabled', true).hide();
   if(xyz == "menu1"){

        $("#Clothing,#Footwear").prop('disabled', false).show();

   }
 });
});

Answer 1

我在自己的页面中运行了这段代码，它运行良好。但是，当我通过调试器在你的 fiddle 中运行它时，我在 IE11 中的 jQuery 文件“访问被拒绝”这一行出现错误:

// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) {
    parent.attachEvent( "onbeforeunload", function() {
        setDocument();
    });
}

在您的 fiddle 中更改为 jquery 1.9 工作正常，在我自己的窗口中使用 jquery 1.10.1 运行您的代码也是如此。看起来这个问题与它如何嵌入 jsfiddle 而不是您的实际代码有关。

经过进一步讨论，您似乎遇到了另一个问题:IE 未处理 <option> 的显示以您想要的方式添加元素。 Chrome 会隐藏它们，而 IE 不会。

您无法控制 IE 或其他浏览器如何选择处理元素的可见属性。因此，我建议您要么有 2 个下拉列表，一个用于男性类别，一个用于女性类别，然后在主要类别发生变化时隐藏/显示适当的下拉列表。另一种选择是使用与该部门相关的元素动态填充选择。

如果您需要，稍后我会为您发布这两个示例。

我已经为你的 fiddle 创建了一个新版本 here

这是创建一个 javascript 选项数组:

var subcategories = [
    { category: "menu1", name: "Clothing"}, 
    { category: "menu1", name: "Accessories"}, 
    { category: "menu1", name: "Footwear" }, 
    { category: "menu2", name: "Watches" }, 
    { category: "menu2", name: "Sunglasses"}, 
    { category: "menu2", name: "Bags"}
];

然后，每次类别下拉列表更改时，所有 option s 从子类别中删除，然后我们遍历子类别数组并将与新选择的类别 ID 匹配的所有元素添加到子类别中:

$("#subcategory option").remove();
$.each(subcategories, function () {
        if (this.category == selectedCategory)
            $("#subcategory").append(
                $("<option />")
                    .val(this.name)
                    .text(this.name));
    });

以上代码使用 jQuery $.each 函数，因为您将子类别数组作为第一个参数传递，第二个参数中指定的函数在每个单独元素的上下文中执行。因此，“this”实际上是对 subcategories[0] 的引用。 , 然后 subcategories[1]等。您也可以使用普通的 javascript for 循环来实现它。