Problème avec hide/show select box dans IE7/8

Question

J'ai essayé d'utiliser une fonction non testée que Justin Johnson a codé (merci encore mate), mais j'ai été aux prises avec des erreurs IE. Im un begginner en javascript.

Fondamentalement, ce qui se passe est ceci:

1. L'utilisateur choisit une option dans une boîte de sélection.
2. Une autre zone de sélection correspondante devient visible.
3. Si une autre zone de sélection a été sélectionnée précédemment, masquez-la.

Tout va bien dans Firefox. Je change la boîte de sélection et tout fonctionne. Mais quand j'essaie d'utiliser IE7/8 ça ne change rien!

J'ai utilisé le option9.style.cssText='display: none'; au lieu du option2.style.display = "none"; mais cela ne marche pas non plus.

Voici le code (pas tous les cas de sélection sont dans ce code, pour la lecture de but et le code a besoin d'optimisation, je le ferai plus tard):

var attachEvento = function(node, event, listener, useCapture) { 
    // Method for FF, Opera, Chrome, Safari 
    if (window.addEventListener) { 
    node.addEventListener(event, listener, useCapture || false); 
    } 
    // IE has its own method 
    else { 
    node.attachEvent('on'+event, listener); 
    } 
}; 


// Once the window loads and the DOM is ready, attach the event to the main 
attachEvento(window, "load", function() { 
    var main_select = document.getElementById("tipos_evento"); 

    var option1 = document.getElementById("temas_conferencias"), 
     option2 = document.getElementById("temas_cursos"), 
     option3 = document.getElementById("temas_provas"), 
     option4 = document.getElementById("temas_visitas"), 
     option5 = document.getElementById("temas_ciencias"), 
     option6 = document.getElementById("temas_dancas"), 
     option7 = document.getElementById("temas_exposicoes"), 
     option8 = document.getElementById("temas_multi"), 
     option9 = document.getElementById("temas_musica"), 
     option10 = document.getElementById("temas_teatro"), 
     option11 = document.getElementById("temas_cultura"), 
     option12 = document.getElementById("temas_desporto"), 
     option13 = document.getElementById("temas_todos"); 

     //initialize with all the select boxes hidden except one 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: block'; 

    var selectHandler = function() { 

    // Show and hide the appropriate select's 
    switch(this.value) { 
     case "8": 
     // Conferências/colóquios 
     option1.style.display = "block"; 
     option2.style.display = "none"; 
     option3.style.display = "none"; 
     option4.style.display = "none"; 
     option5.style.display = "none"; 
     option6.style.display = "none"; 
     option7.style.display = "none"; 
     option8.style.display = "none"; 
     option9.style.display = "none"; 
     option10.style.display = "none"; 
     option11.style.display = "none"; 
     option12.style.display = "none"; 
     option13.style.display = "none"; 
     break; 
     case "10": 
     // Cursos/workshops 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: block'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "7": 
     // provas 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: block'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "12": 
     // ciencia 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: block'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 

     default: 
     // Hide all 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option13.style.cssText='display: block'; 
    } 
    }; 

    // Use the onchange and onkeypress events to detect when the 
    // value of main_select has changed 
    attachEvento(main_select, "change", selectHandler); 
    attachEvento(main_select, "keypress", selectHandler); 
}); 

Merci u.

Voici le code HTML.

 <div class="pesquisa-event-select"><!-- pesquisa select-boxs --> 
      <p> 
       <label for="tipo">tipo de evento </label> 
       <select id="tipos_evento"> 
        <option value="104">todos</option> 
        <option value="8">Conferências/Colóquios</option> 
        <option value="10">Cursos/Workshops</option> 
        <option value="7">Provas académicas</option> 
        <option value="9">Visitas/Observações</option> 
        <option value="12">Ciência(outros)</option> 
        <option value="2">Danças</option> 
        <option value="1">Exposições</option> 
        <option value="3">Multidisciplinar</option> 
        <option value="4">Música</option> 
        <option value="5">Teatro</option> 
        <option value="6">Cultura(outros)</option> 
        <option value="48">Desporto</option> 
       </select> 
      </p> 


     <div id="temas_todos"> 
      <p> 
      <label for="Tema">tema de evento </label> 
       <select> 
        <option value="">todos</option> 
       <xsl:for-each select="temas_todos/TemasEventos/Row"> 
        <xsl:sort select="TipoEvento"/> 
        <option value="{Numero}"> 
         <xsl:value-of select="TipoEvento" />_ 
         <xsl:value-of select="TemaEvento" /> 
        </option> 
       </xsl:for-each> 
       </select> 
      </p> 
    </div> 

    <div id="temas_conferencias"> 
      <p> 
      <label for="Tema">tema de evento</label> 
       <select> 
        <option value="">todos</option> 
       <xsl:for-each select="temas_conferencias/TemasEventos/Row"> 
        <xsl:sort select="TemaEvento"/> 
        <option value="{Numero}"> 
         <xsl:value-of select="TemaEvento" /> 
        </option> 
       </xsl:for-each> 
       </select> 

      </p> 
    </div> 

    <div id="temas_cursos"> 
      <p> 
      <label for="Tema">tema de evento</label> 
       <select> 
        <option value="">todos</option> 
       <xsl:for-each select="temas_cursos/TemasEventos/Row"> 
        <xsl:sort select="TemaEvento"/> 
        <option value="{Numero}"> 
         <xsl:value-of select="TemaEvento" /> 
        </option> 
       </xsl:for-each> 
       </select> 

      </p> 
    </div> 

Answer 1

Vous aurez également besoin de publier votre code HTML afin que nous puissions comprendre exactement ce qui ne va pas. Utilisez-vous un identifiant, un nom ou les deux pour décrire vos éléments de formulaire? Il vaut probablement mieux utiliser le format style.display="none" au lieu de style.cssText car, dans ce dernier cas, vous remplacez l'attribut de style entier de cet objet.

Answer 2

Pour ne pas critiquer le code qui vous a été fourni ... mais il y a probablement un moyen beaucoup plus propre de l'implémenter. (code non testé)

var attachEvento = function(node, event, listener, useCapture) { 
    // Method for FF, Opera, Chrome, Safari 
    if (window.addEventListener) { 
    node.addEventListener(event, listener, useCapture || false); 
    } 
    // IE has its own method 
    else { 
    node.attachEvent('on'+event, listener); 
    } 
}; 

var selectLists = ['temas_conferencias','temas_cursos','temas_provas','temas_visitas','temas_ciencias','temas_dancas','temas_exposicoes','temas_multi','temas_musica','temas_teatro','temas_cultura','temas_desporto','temas_todos']; 

var selectHandler = function(){ 
    var value = this.value; 
    var select; 
    for(var i=0,sLen=selectLists.length;i<sLen;i++){ 
    select = document.getElementById(selectLists[i]); 
    if(value == (i+1)){ 
     select.style.display = 'block'; 
    } else { 
     select.style.display = 'none'; 
    } 
    } 
}; 

attachEvento(window, "load", function() { 
    // Use the onchange and onkeypress events to detect when the 
    // value of main_select has changed 
    attachEvento(main_select, "change", selectHandler); 
    attachEvento(main_select, "keypress", selectHandler); 
}); 

Essentiellement, il le fait.

1. Il enregistre un gestionnaire d'événements « selectHandler » pour le onchange ou les événements onkeypress sur la principale liste de sélection.

2. Pour réduire au minimum le code, j'ai mis les ID des « autres » sélectionner des listes dans un tableau appelé « selectLists »

3. Lorsque le selectHandler est déclenché, il vérifie simplement la valeur de la sélection principale , puis itère sur les autres sélections dans le tableau "selectLists" et définit l'affichage sur "none" - à moins qu'il ne corresponde à la valeur de sélection principale, auquel cas il l'affiche.

Answer 3

d'abord nettoyer le code pour le rendre plus clair, et essayer à nouveau

// Once the window loads and the DOM is ready, attach the event to the main 
attachEvento(window, "load", function() { 
    var main_select = document.getElementById("tipos_evento"); 

    var selectOptions = new Array(); 

    selectOptions.push(document.getElementById("temas_conferencias")); 
    selectOptions.push(document.getElementById("temas_cursos")); 
    ... 
    selectOptions.push(document.getElementById("temas_todos")); 

     //initialize with all the select boxes hidden except one 
     for (var ind=0; ind< (selectOptions.length-1); ind++) 
      selectOptions[ind].style.cssText='display: none'; 
     selectOptions[13].style.cssText='display: block'; 


    var selectHandler = function() { 

     // Hide all 
     for (var ind=0; ind< selectOptions.length; ind++) 
      selectOptions[ind].style.cssText='display: none'; 

    // Show and hide the appropriate select's 
    switch(this.value) { 
     case "8": 
     // Conferências/colóquios 
     selectOptions[1].style.display = "block"; 
     break; 
     case "10": 
     // Cursos/workshops 
     selectOptions[2].style.display='block'; 
     break; 
     case "7": 
     // provas 
     selectOptions[3].style.display='block'; 
     break; 
     case "12": 
     // ciencia 
     selectOptions[5].style.display='block'; 
     break; 
     selectOptions[13].style.display='block'; 
    } 
    }; 

    // Use the onchange and onkeypress events to detect when the 
    // value of main_select has changed 
    attachEvento(main_select, "change", selectHandler); 
    attachEvento(main_select, "keypress", selectHandler); 
}); 

Answer 4

Le problème est que le dans le cadre de la fonction de rappel attribué par la fonction attachEvent (selectHandler), le cette référence n'est pas l'élément affecté par l'événement, est une référence à l'objet window.

Puisque vous déclarez une variable pour stocker la référence de l'élément main_select vous pouvez l'utiliser sur votre instruction switch:

var selectHandler = function() { 

    switch(main_select.value) { 
    //.... 
    } 
}