2009-10-06 6 views
3

J'essaie d'obtenir les valeurs à une liste de sélection pour les sous-catégories sur la base de ce qui est choisi dans la liste de sélection des catégories. Il ne semble pas fonctionner sur IE. Quelqu'un peut-il suggérer le problème?Dropdown ne pas se peupler dans IE?

Dans le fichier php je

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

Dans le fichier js j'ai quelque chose comme

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; 
} 
+0

Je ne pense pas qu'il est directement lié à votre problème, mais ne pas oublier que vous êtes pas censé avoir des esperluettes (&) dans votre code HTML - utilisez plutôt le code d'entité HTML & pour afficher des esperluettes. –

+0

Oh oui..Merci pour la suggestion. Mais je suis un peu coincé avec ce petit javascript – Arc

+0

Pourquoi utilisez-vous JS, ou même PHP? Si les données sont codées en dur comme ça, vous pouvez aussi le faire en HTML. –

Répondre

3

Essayez d'utiliser l'équivalent DOM:

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); 
} 
+0

Peut faire cela, mais pourquoi ce qui précède ne fonctionne pas .. Je voulais juste le savoir. – Arc

+2

Ce qui précède ne fonctionne pas car IE ne vous permet pas d'utiliser innerHTML sur un select. – epascarello

0

Je l'ai rencontré ce bug avant. Vous ne pouvez pas définir le innerHTML sur un élément de sélection dans Internet Explorer. Vous devez envelopper l'élément select dans un div (ou un autre élément), puis générer le balisage d'un nouvel élément select qui inclut les options que vous souhaitez insérer.

Voici un petit pseudo-code:

  1. cible select
  2. Enveloppez la sélection dans un élément div
  3. Stocker le balisage de la sélection pour une réutilisation ultérieure (étape 5) et décochez la contenu du div
  4. Générez le balisage pour les options
  5. Inclure cette balise dans la balise select stocké
  6. Mettez le tout à l'intérieur div entourant la sélection

Inutile de dire: Je fini par utiliser l'approche DOM pur .. Ce qui est dommage, car il est beaucoup plus lent que d'utiliser innerHTML.

+0

Ce n'est pas nécessaire. Il a été possible de repeupler les options d'un select dans tous les principaux navigateurs depuis plus d'une décennie en remplissant la collection 'options' de select avec des objets' Option'. –

+0

@Tim Down: Essayez de relire ma réponse. Je cite: _ "Cela ne semble pas fonctionner sur IE. Est-ce que quelqu'un peut suggérer le problème?" ._ Il veut savoir quel est le problème. Et je lui ai donné cette réponse. En plus de cela: je l'encourage en fait à utiliser l'approche DOM pure et à passer l'approche innerHTML – roosteronacid

+0

J'avais lu et compris votre réponse quand j'ai commenté.J'ai depuis décidé que mon downvote était trop hâtif, mais apparemment je ne peux pas l'enlever sauf si vous éditez votre réponse, donc je suis désolé et j'essaierai de changer mes habitudes puisque c'est la deuxième fois que je fais ça cette semaine . Ce à quoi je m'opposais dans votre réponse, c'était la description d'une technique que nous sommes tous les deux d'accord pour dire qu'elle est mauvaise; Je pense qu'il vaut mieux encourager les bonnes techniques. Je ne suis pas sûr non plus que l'approche pure de DOM fonctionne dans tous les navigateurs raisonnables mais mon souvenir est flou pour que je puisse me tromper. –

0

Utilisez la méthode séculaire de la création d'objets Option et les ajouter à la collection choisie de options:

var subcategoriesArr = subcategories[category]; 
var i, len, selected, optionText; 

// Clear any existing options 
subelem.options.length = 0; 

// Create new options 
for (i = 0, len = subcategoriesArr.length; i < len; i++){ 
    selected = (subcategoriesArr[i] === default_value); 
    optionText = subcategoriesArr[i]; 
    subelem.options[i] = new Option(optionText, optionText, selected, selected); 
} 
Questions connexes