onclick rendere alcuni elementi della pagina invisibili

[Mikele Sagitter]

Ciao ragazzi sto costruendo a mano delle select dinamiche per cui

<script type="text/javascript" language="javascript">
    function changeprovince<?php echo $row_regioni['codice']; ?>() {
        document.getElementById("province<?php echo $row_regioni['codice']; ?>").style.display="block";
    }
</script>

Con questo script regolarmente al click su una regione viene visualizzata la select successiva che visualizza le province ma la vecchia select resta.
Come posso fare per far scomparire le vecchie select ad ogni click?

Avevo provato dando una classe a tutte le select provincia e scrivendo:

<script type="text/javascript" language="javascript">
    function changeprovince<?php echo $row_regioni['codice']; ?>() {
[B]document.getElementByClass("provincia").style.display="none";[/B] 
        document.getElementById("province<?php echo $row_regioni['codice']; ?>").style.display="block";
    }
</script>

ma firebug mi dice che document.getElementByClass("provincia") non è valido.

Qualche consiglio?

[fcaldera]

non esiste document.getElementByClass

dovresti fare in modo di assegnare a ciascuna select un id univoco per poi nasconderle con
document.getElementById('idunivoco').style...

[Mikele Sagitter]

Originariamente inviato da fcaldera
non esiste document.getElementByClass

dovresti fare in modo di assegnare a ciascuna select un id univoco per poi nasconderle con
document.getElementById('idunivoco').style...

document.getElementByClass l'ho letto in diverse guide....

la pagina contiente già molte query e query iterate in altre query, non ci sarebbe un modo di nascondere tutte le select con una sola riga di javascript senza iterare in un ciclo anche questo comando?

[fcaldera]

il metodo a cui ti riferisci probabilmente è document.getElementsByClassName che però non è supportato da molti browser (tra i quali Internet Explorer)

se proprio non puoi aggiungere un attributo id allora devi scriverti una funzione che prenda gli elementi per classe che funzioni su ogni browser:

ad esempio questa o quest'altra scritta da nyman

[Mikele Sagitter]

Mhm in effetti come dice l'articolo questa è una grande lacuna del dom

cmq scusa la mia grande inesperienza in javascript, ora ho questa funzione ma come la uso?

function getElementsByClass(node,searchClass,tag) {
  var classElements = new Array();
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("\b"+searchClass+"\b");
  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
return classElements;
} 

[fcaldera]

getElementsByClass(node,searchClass,tag)

ovvero nel tuo caso (ipotizzando che tu cerchi in tutto il body)

getElementsByClass(document.body, 'provincia', 'select')


Questo ti restituirà ovviamente un array (anche se c'è un solo elemento con quella classe)
Devi controllare che l'array non sia vuoto, ciclarlo e per ciascun elemento settare il suo style.


comunque c'è una spiegazione nell'ultima pagina che ti ho linkato

How to call it and parameters
Parameters

* className
One or several class names, separated by space. Multiple class names demands that each match have all of the classes specified. Mandatory.

* tag
Specifies the tag name of the elements to match. Optional.

*elm
Reference to a DOM element to look amongst its children for matches. Recommended for better performance in larger documents. Optional.

[Mikele Sagitter]

Quindi in un caso generale sarebbe

getElementsByClass(document.body, 'NOME DELLA CLASSE', 'TIPO DI ELEMENTO')

giusto?

[fcaldera]

sì quello sarebbe il principio generale

[Mikele Sagitter]

DA niubbio in javascript ho provato così

<script type="text/javascript" language="javascript">
    function changeprovince<?php echo $row_regioni['codice']; ?>() {
        if(getElementsByClass(document.body, 'provincia', 'select')!="")
        {            
            while(getElementsByClass(document.body, 'provincia', 'select'))
            {
                document.getElementsByClass(document.body, 'provincia', 'select').style.display="none";
            }
        }
        document.getElementById("province<?php echo $row_regioni['codice']; ?>").style.display="block";
    }
</script>

ma non ho risultati (neanche errori e questo già è positivo lol)
In pratica fa come prima: al cambio della regione fa apparire la nuova select ma questa si va ad aggiungere alle altre scelte precedentemente (che non vengono settate a display:none

Dove sbaglio?

[fcaldera]

sbagli il modo di riferirti alle singole select mentre cicli l'array.

<script type="text/javascript">
    function changeprovince<?php echo $row_regioni['codice']; ?>() {
        
        var ps = [];
        ps = getElementsByClass(document.body, 'provincia', 'select'); /* restituisce un array */
        var numselect = ps.length;

        if (numselect === 0) return; // nessuna select
        while (numselect--) { ps[numselect].style.display = "none"; };

        document.getElementById("province<?php echo $row_regioni['codice']; 
        ?>").style.display = "block";
    }
</script>

Ciao