[JS] alle select boxen op de website verbergen

[Verwijderd]

Ik wil graag met een javascript alle <select> boxen op een pagina verbergen en evenlater weer tevoorschijn halen. Ik kwam tot dit in javascript maar dat werkt niet:

code:

function hideSelects() {
inputs = document.getElementsByTagName('INPUT');
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'select') {
            inputs[i].style.visibility = 'hidden';
        }
    }
}

Ik ben niet zo'n ster in JavaScript, iemand die mij even een stukje opweg kan helpen?

[ Voor 9% gewijzigd door Verwijderd op 28-04-2006 15:06 ]

[Erkens]

Je selecteerd alle tags die als naam "INPUT" hebben, terwijl je "SELECT" zoekt
Daarnaast neemt het element nog altijd ruimte in met "visibility=hidden", wil je hem echt onzichtbaar hebben dan moet je disply=none doen:

JavaScript:

function hideSelects() {
    var inputs = document.getElementsByTagName('select');
    for (var i = 0; i < inputs.length; i++) {
            inputs[i].style.display = 'none';
    }
}

[ Voor 10% gewijzigd door Erkens op 28-04-2006 15:09 ]

[Justice]

JavaScript:

function hideSelects() {
var selects = document.getElementsByTagName('select');
    for (i = 0; i < selects.length; i++) {
            selects[i].style.display = 'none';
        }
    }
}

Ipv regel 4 kan je beter een bepaalde class toekennnen en deze stylen met CSS. Damn te laat.

[ Voor 32% gewijzigd door Justice op 28-04-2006 15:10 ]

[Verwijderd]

Nee dat visibility doe ik expres

Thnx voor de tip, het moet idd select zijn, 't werkt!

[Kingiez]

Justice schreef op vrijdag 28 april 2006 @ 15:08:

JavaScript:

function hideSelects() {
var selects = document.getElementsByTagName('select');
    for (i = 0; i < selects.length; i++) {
            selects[i].style.display = 'none';
        }
    }
}

Ipv regel 4 kan je beter een bepaalde class toekennnen en deze stylen met CSS. Damn te laat.

Zoiets krijg je dan:

JavaScript:

function hideSelects() {
    var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i++) {
            selects[i].className = 'selectClass'
        }
    }
}

Wat je ook kan doen is in CSS de select selector een display: none; meegeven, en alleen de selects die je later wilt laten zien een class meegeeft, waardoor die zichtbaar wordt.

dus:

JavaScript:

function showSelects() {
    var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i++) {
            selects[i].className = 'show';
        }
    }
}
// of als je maar 1 select wil showen:
function showSelect(name) {
    var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i++) {
            if (selects[i].name == name) selects[i].className = 'show';
        }
    }
}

Cascading Stylesheet:

select {
   display: none;
}
select.show {
   display: inline;
}

should do the trick