選擇使用jQuery不工作在IE中的選項？

在這裏，我試圖獲得基於#category選擇時的值，當我選擇一個類別的男人或女人，下面的選擇選項應該顯示相關的選項。我做了什麼滿意我的要求，但此代碼不起作用在ie.it顯示所有#subcategory的選項，而不是顯示各自的選項#category。任何幫助是感謝。選擇使用jQuery不工作在IE中的選項？

這裏是我的小提琴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(); 

    } 
}); 
});

來源

2014-01-27 3bu1

哪個版本的IE？哪個版本的jQuery？ – cimmanon

一般而言，您不能將

它似乎在IE10和IE11中工作也爲什麼在'$（「＃Clothing，＃Footwear」）中使用'.show（）'。prop（'disabled'，false）.show（）;'？和infact'.hide（）'in'$（「＃subcategory option」）。prop（'disabled'，true）.hide（）;'？你是否試圖展示恰當的特徵並隱藏其餘的內容？ –

我在自己的頁面中運行了這段代碼，它工作正常。然而，當我在你的小提琴與調試器，我在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或其他瀏覽器如何選擇該元素的可見屬性的句柄。因此，我建議你或者有兩個下拉菜單，一個用於男性類別，一個用於女性用戶，然後在主類別發生變化時隱藏/顯示相應的下拉菜單。另一個選擇是動態填充與該部門相關的項目的選擇。

如果您需要，我會稍後爲您發佈這兩種示例。

我已經創建了自己搗鼓的新版本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循環來實現此功能。

來源

2014-01-27 19:20:59 Joel

可以請你提出好的問題我是一個新的jQuery用戶沒有得到你所說的。預先感謝 – 3bu1

當然。您正在使用的jQuery庫版本（左上角的「框架和擴展」下的1.10.1）未正確加載到IE中，因此導致您的腳本無法運行。我相信這是由於頁面被嵌入到jsFiddle站點中的一個框架中。你有兩個選擇：1）將你的框架改爲jQuery 1.9.1，它將在IE中正確加載並允許腳本工作，或者2）用真實的網頁測試代碼，而不是嵌入到jsFiddle中。 – Joel

我在我的本地服務器上測試，仍然是同樣的問題。當我使用jquery 1.9.1時，所有選項都顯示出來，但它們無法訪問（禁用），導致UI很差。我需要的是不顯示 – 3bu1

選擇使用jQuery不工作在IE中的選項？

回答

相關問題