CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
3bu1
3bu1

Reputation: 985

select option using jquery not working in IE?

Here i am trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but this code doesn't work in ie.it shows all the options of the #subcategory instead of showing the respective option to the #category.any help is thankful.

here is my fiddle http://jsfiddle.net/JUGWU/8/
NOTE : check this link in 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();

   }
 });
});

Upvotes: 1

Views: 1831

Answers (1)

Joel
Joel

Reputation: 2257

I ran this code in my own page and it works fine. However, when I run it in your fiddle with by debugger, I'm getting an error in IE11 in the jQuery file "Access is denied" at this line:

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

Changing to jquery 1.9 in your fiddle works fine, as does running your code with jquery 1.10.1 in my own window. Looks like the issue is related to how it's embedded in jsfiddle and not your actual code.

After further discussion, it looks like you have another issue: IE isn't handling the display of <option> elements the way you want. Chrome hides them, and IE doesn't.

You can't control how IE or other browsers choose the handle the visible property of the element. Therefore, I would suggest you either have 2 dropdowns, one for men's category and one for women's, and then hide/show the appropriate one when the main category changes. Another option is to dynamically populate the select with the items related to that department.

I will post an example of both of these a little later for you if you need it.

I have created a new version of your fiddle here

This one is creating a javascript array of options:

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"}
];

Then, every time the category dropdown changes, all options are removed from the subcategory and then we iterate through the subcategory array and add all items that match the newly selected category ID to the subcategory:

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

The above code uses the jQuery $.each function, since you're passing in the subcategories array as the first parameter, the function specified in the second parameter executes in the context of each individual item. Therefore "this" is really a reference to subcategories[0], then subcategories[1], etc. You could implement this with a normal javascript for loop as well.

Upvotes: 2

Related Questions