ansaurus

Question

Problem with hide/show select box in IE7/8

Answer 1

A:

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.

JustinStolle 2009-08-07 16:50:55

Answer 2

A:

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.

It registers an event handler "selectHandler" for the onchange or onkeypress events on the main select list.
To minimized the code, I've put the IDs of the "other" select lists into an array called "selectLists"
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.

scunliffe 2009-08-07 16:52:31

Answer 3

A:

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

andres descalzo 2009-08-07 16:59:50

Answer 4

A:

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) {
    //....
    }
}

CMS 2009-08-07 17:07:08

THank u CMS. Ive inserted that, but it didnt work unfortunetly.Maybe i cant be a programmer..i dont understand **** of it

dutraveller 2009-08-07 17:37:27

You don't have to insert the above code, you should only *change* this line: *switch(this.value) {* to: *switch(main_select.value) {*

CMS 2009-08-07 18:16:32

yes, i just changed that line.Im dumb, but not soooo dumb :)

dutraveller 2009-08-07 18:32:17

ansaurus

tags:

views:

answers:

Problem with hide/show select box in IE7/8

related questions