Question

在这里，我尝试根据#category选择获取值，当我选择男性或女性类别时，选择选项后应显示相关选项。我确实满足了我的要求，但此代码不起作用ie.it显示#subcategory的所有选项，而不是显示#category的相应选项。感谢任何帮助。

这是我的小提琴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

我在自己的页面中运行此代码，它运行正常。但是，当我通过调试器在你的小提琴中运行它时，我在jQuery文件“访问被拒绝”中的IE11中出现错误：

// 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();
    });
}

在您的小提琴中更改为jquery 1.9可以正常工作，就像在我自己的窗口中使用jquery 1.10.1运行代码一样。看起来问题与它如何嵌入jsfiddle有关，而不是你的实际代码。

经过进一步讨论，看起来你还有另一个问题：IE没有按照你想要的方式处理<option>元素的显示。 Chrome会隐藏它们，而IE则不会。

您无法控制IE或其他浏览器如何选择处理元素的visible属性。因此，我建议您有2个下拉菜单，一个用于男性类别，一个用于女性类别，然后在主要类别更改时隐藏/显示相应的一个。另一个选项是使用与该部门相关的项目动态填充选择。

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

我创建了你的小提琴的新版本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都将从子类别中删除，然后我们遍历子类别数组并将与新选择的类别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循环实现此功能。

使用jquery选择选项不在IE中工作？

1 个答案: