收录日期:2020/06/02 18:09:14 时间:2009-08-07 17:34:58 标签:javascript,internet-explorer

Ive been trying to use an untested function that Justin Johnson coded(thanks again mate), but ive been struggling with IE errors. Im a begginner in javascript.

Basically what happens is this:

  1. User chooses an option from a select box.
  2. Other corresponding select box becomes visible.
  3. If there is any other select box that was choosed earlier, hide it.

Everything is ok in Firefox. I change the select box and everything works. But when i try to use in IE7/8 it doesnt change nothing!

I used the option9.style.cssText='display: none'; instead of the option2.style.display = "none"; but it doesnt work either.

Here is the code(not all the select cases are in this code, for reading purpose and the code needs optimization, i will do it later on):

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

Thank u.

Here is the 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>

You'll need to also post your HTML so we can understand exactly what is going wrong. Do you use ID, Name, or both to describe your form elements? You'd probably be better off using the style.display="none" format instead of style.cssText because, in the latter, you're replacing the entire style attribute of that object.

first clean up the code to make it more clear, and try again

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

Not to bash the code you were provided... but there is likely a much cleaner way to implement this. (code untested)

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

Essentially it does this.

  1. It registers an event handler "selectHandler" for the onchange or onkeypress events on the main select list.

  2. To minimized the code, I've put the IDs of the "other" select lists into an array called "selectLists"

  3. When the selectHandler is triggered, it simply checks the value of the main select, then iterates over the other selects in the "selectLists" array and sets the display to "none" - unless it matches the main select value, in which case it displays it.

The problem is that the in the context of the callback assigned by the attachEvent function (selectHandler), the this reference is not the element affected by the event, is a reference to the window object.

Since you declared a variable to store the reference of the main_select element you can use it on your switch statement:

var selectHandler = function() {

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