style.display= "none" non funziona su safari e chrome. come ovviare?

[Mikele Sagitter]

Ciao ragazzi ho uno script che su ie,ff e opera funziona, su safari e chrome no.

Una piccola anticipazione:

<select name="regioni" id="regioni" style="margin-left:5px;"> 
    <option value="" selected="selected">Seleziona una regione</option> 
 
    <option onclick="changeprovince13(), dipnonecomuni()" id="13" value="13">ABRUZZO</option> 
 
    <option onclick="changeprovince17(), dipnonecomuni()" id="17" value="17">BASILICATA</option> 
 
    <option onclick="changeprovince18(), dipnonecomuni()" id="18" value="18">CALABRIA</option> 
 
    <option onclick="changeprovince15(), dipnonecomuni()" id="15" value="15">CAMPANIA</option> 
 
    <option onclick="changeprovince8(), dipnonecomuni()" id="8" value="8">EMILIA-ROMAGNA</option> 
 
    <option onclick="changeprovince6(), dipnonecomuni()" id="6" value="6">FRIULI-VENEZIA GIULIA</option> 
 
    <option onclick="changeprovince12(), dipnonecomuni()" id="12" value="12">LAZIO</option> 
 
    <option onclick="changeprovince7(), dipnonecomuni()" id="7" value="7">LIGURIA</option> 
 
    <option onclick="changeprovince3(), dipnonecomuni()" id="3" value="3">LOMBARDIA</option> 
 
    <option onclick="changeprovince11(), dipnonecomuni()" id="11" value="11">MARCHE</option> 
 
    <option onclick="changeprovince14(), dipnonecomuni()" id="14" value="14">MOLISE</option> 
 
    <option onclick="changeprovince1(), dipnonecomuni()" id="1" value="1">PIEMONTE</option> 
 
    <option onclick="changeprovince16(), dipnonecomuni()" id="16" value="16">PUGLIA</option> 
 
    <option onclick="changeprovince20(), dipnonecomuni()" id="20" value="20">SARDEGNA</option> 
 
    <option onclick="changeprovince19(), dipnonecomuni()" id="19" value="19">SICILIA</option> 
 
    <option onclick="changeprovince9(), dipnonecomuni()" id="9" value="9">TOSCANA</option> 
 
    <option onclick="changeprovince4(), dipnonecomuni()" id="4" value="4">TRENTINO-ALTO ADIGE</option> 
 
    <option onclick="changeprovince10(), dipnonecomuni()" id="10" value="10">UMBRIA</option> 
 
    <option onclick="changeprovince2(), dipnonecomuni()" id="2" value="2">VALLE D'AOSTA</option> 
 
    <option onclick="changeprovince5(), dipnonecomuni()" id="5" value="5">VENETO</option> 
</select> 

 

 
 
 
 
<script type="text/javascript" language="javascript"> 
    function dipnonecomuni() {
        document.getElementById("comuni84").style.display = "none";
                document.getElementById("comuni6").style.display = "none";
                document.getElementById("comuni42").style.display = "none";
                document.getElementById("comuni7").style.display = "none";
[.....qui tutto uguale!]
                document.getElementById("comuni24").style.display = "none";
                document.getElementById("comuni56").style.display = "none";
            }
</script> 
 
    <select name="provincia[]" id="province13" style="display:none; margin-left:5px;" class="selectprovincia"> 
            <option value="" selected="selected">Seleziona una provincia</option> 
                <option onclick="changecomuni69()" id="provincia69" value="Chieti">Chieti</option> 
                <option onclick="changecomuni66()" id="provincia66" value="L'Aquila">L'Aquila</option> 
                <option onclick="changecomuni68()" id="provincia68" value="Pescara">Pescara</option> 
                <option onclick="changecomuni67()" id="provincia67" value="Teramo">Teramo</option> 
            </select> 
<script type="text/javascript" language="javascript"> 
    function changeprovince13() {
        document.getElementById("province13").style.display = "none";
                document.getElementById("province17").style.display = "none";
                document.getElementById("province18").style.display = "none";
                document.getElementById("province15").style.display = "none";
                document.getElementById("province8").style.display = "none";
                document.getElementById("province6").style.display = "none";
                document.getElementById("province12").style.display = "none";
                document.getElementById("province7").style.display = "none";
                document.getElementById("province3").style.display = "none";
                document.getElementById("province11").style.display = "none";
                document.getElementById("province14").style.display = "none";
                document.getElementById("province1").style.display = "none";
                document.getElementById("province16").style.display = "none";
                document.getElementById("province20").style.display = "none";
                document.getElementById("province19").style.display = "none";
                document.getElementById("province9").style.display = "none";
                document.getElementById("province4").style.display = "none";
                document.getElementById("province10").style.display = "none";
                document.getElementById("province2").style.display = "none";
                document.getElementById("province5").style.display = "none";
                document.getElementById("province13").style.display = "block";
    }
</script> 
 
    <select name="provincia[]" id="province17" style="display:none; margin-left:5px;" class="selectprovincia"> 
            <option value="" selected="selected">Seleziona una provincia</option> 
                <option onclick="changecomuni77()" id="provincia77" value="Matera">Matera</option> 
                <option onclick="changecomuni76()" id="provincia76" value="Potenza">Potenza</option> 
            </select> 

Etc Etc...
mi sembra molto strano visto che le uniche operazioni che faccio sono dare un display none/block a degli elementi....che ne pensate?
codice completo qui

[Xinod]

cambiare il display non dovrebbe comportare problemi sui browser in questione,
ma l' onclick sulle singole option non e' gestito correttamente da tutti i browser
e istruzioni diverse vanno separate da ; non virgola
sistemerei queste cose prima di passare ad un debug piu' approfondito

[Mikele Sagitter]

ok non sapevo ci volesse il ;

ho cambiato , in ; cambiato onclick in onchange ma niente

[Virus_101]

Il fatto e' che tu stai visualizzando i dati in delle options.

L'oggetto select e option ha delle prop tte sue e non e' detto che tu possa usa lo style display:none/block tu tale elemnto.

Non e' un prb di js ma di css e di come il browser lo gestisce.

Per fare quelloc he vuoi devi gestire l'array delle option nella select non puoi usare i display.

io ti consiglio di usare un approccio diverso

ti fai degli array array di option e vai a svuotare e ripopolare le select scorrendo e filtrando tali array , usare il display su elementi di tipo option e' follia.

esempio

function svuotaSelect( id )
{
     while(id.length>0)
          id.remove(0);ì
}

function popolaSelect( id , dati)
{
     svuotaSelect(id);

     for(var i = 0; i<dati.length ; i++ )
     {
          id.options[i] = new Option( dati[i].testo , dati[i].value );
     }
} 

Cosi ti puoi svuotare e ripopolare le select come ti pare

per invocare e passare i dati fai

// JSON ARRAY CONFIG
dati =new Array( 
{  "testo" : "testo1" , "value" : "1" } , 
{  "testo" : "testo2" , "value" : "2" } , 
{  "testo" : "testo3" , "value" : "3" } 
) ;
popolaSelect( document.getElementById('select_id_12' , dati ) ) 

[Mikele Sagitter]

Oddio....mi rendo conto che di javascript non ne capisco un *****