I am trying to get the values to a select list for subcategories on the basis on what is chosen in categories select list. It doesn't seem to work on IE. Can anyone suggest the problem?

In the php file I have

<body onload="setSubcategories(default_value);">

In the js file I have something like

 subcategories = new Array();
 subcategories['Lifestyle'] = ['All',
                                  'Beauty (SHC)',
                                  'Skin Care',
                                  'Hair Care',
                                  'Oral Care',
                                  'Cosmetics',
                                  'Footwear',
                                  'Jewelry',
                                  'Male Styling',
                                  'Women Hygiene',
                                  'Womens magazines',
                                  'Apparels',
                                  ' Fashion (AFA)',
                                  'Spa',
                                  'Accessories'
                                  ];
    subcategories['Automobiles'] = ['All',
                           'Automobiles (C&B)',
                           'Cars',
                           'Bikes',
                           'Car Magazine',
                           'Bikes Magazine',
                           'Accessories'
                       ];
    subcategories['FoodandBeverage'] = ['All',
                                  'Snacking',
                                  'Confectionary',
                                  'Beverages',
                                  'Generic F&B',
                                  'Restaurant Review',
                                  'Food Reviews',
                                  'Wines & Vineyards'
                              ];


function setSubcategories(default_value){
    default_value = (typeof default_value == 'undefined') ?
             'All' : default_value;
    var elem = document.getElementById('id-category');
    if(elem == null){return false;}

    var category = elem.value;
    var subelem = document.getElementById('id-subcategory');
    var html = "";
    var subcategoriesArr = subcategories[category];
    for(var i=0; i < subcategoriesArr.length; i++){
        var selected = subcategoriesArr[i] == default_value ? " selected" : "";
        html += '<option' + selected + '>' + subcategoriesArr[i] + '</option>\n';
    }
    subelem.innerHTML = html;
}

Comments

I don't think it's directly related to your problem, but don't forget that you're not supposed to have ampersands (&) in your HTML - use the &amp; HTML entity code instead to render ampersands.

Written by DrJokepu

Oh yes..Thanks for the suggestion. But I am bit stuck with this small javascript

Written by Arkid Mitra

Why are you using JS, or even PHP? If the data is hardcoded like that, you may as well do it in HTML.

Written by Ewan Todd

It's a good idea to declare all your variables with var, which you don't appear to have done with subcategories. Also, subcategories should be an Object rather than an Array, since you're not using any of Array's special features.

Written by Tim Down

Accepted Answer

Try using DOM equivalent:

var subcategoriesArr = subcategories[category];
for(var i=0; i < subcategoriesArr.length; i++){
    var option = document.createElement('option');
    option.value = option.text = subcategories[i];
    option.selected = (subcategoriesArr[i] == default_value);
    subelem.appendChild(option);
}
Written by jerjer
This page was build to provide you fast access to the question and the direct accepted answer.
The content is written by members of the stackoverflow.com community.
It is licensed under cc-wiki