Select dipendente da prima select.

[AnGeK82]

Salve a tutti ho un problema che davvero non capisco.Sto studiano proprio adesso le basi di js.
Il mio problema è che ho 2 select una dipendenti dall'altra funziona tutto bene tranne che quando vado ad abilitare la seconda select essa mi viene caricata con i valori giusti ma in una pagina bianca con la sola select attivata.Ecco il codice che è una prova quindi non molto pulito e scusate se non sono stato chiaro:

<Script type="text/javascript">
function abilita(obj) { 
    if (obj.name=='diff') {
            obj.form.durata.removeAttribute("disabled"); 
            var elem=document.form.diff;
            var num=parseInt(document.form.diff.value);
            if(num==1){
            
            document.write("<tr><td><select><option>Scegli</option><option>2 ore</option><option>3 ore</option></select></td></tr>");
        }if(num==2){
            
            document.write("<tr><td><select><option>Scegli</option><option>5 ore</option><option>6 ore</option></select></td></tr>");
        }if(num==3){
            
            document.write("<tr><td><select><option>Scegli</option><option>9 ore</option><option>12 ore</option></select></td></tr>");
        }
            else {
            obj.form.diff.setAttribute('disabled','true');
        }
    }
    
}

</Script>
</head>
<form name="form">
<div id="principale">
<table  align="center">
<tr aling="center"><td><h1 >Inserisci i dati dell'escursione</h1></td></tr>
</table>
    <div id="div1">
        <table border="0">
         <tr><td>Località:</td><td><input type="text" name="nome_Loc" maxlenght="20" size="20"></td></tr>
         <tr><td>Data:</td><td><input type="text" name="gma" maxlenght="10" size="12">(gg/mm/aaaa)</td></tr>
         <tr><td>Ora:</td><td><input type="text" name="nome_Loc" maxlenght="8" size="6">(hh:mm)</td></tr>
        </table>
    </div>
    
    <div id="div_durata">
        <table>
         <tr><td>Difficoltà:</td><td>
         <select name="diff" onchange="abilita(this);">
         <option value="0">Scegli</option>
         <option value="1">Facile</option>
         <option value="2">Media</option>
         <option value="3">Difficile</option>
         </select>
         </td></tr>
         <tr><td>Durata:</td><td>
         <select name="durata"disabled>
         
         </table>
         
    </div>
</div> 

[artorius]

bhe, è quello che succede nel fare il document.write nell'head della pagina:

document.write scrive a partire dall'inizio del tag script ion cui è contenuto (o richiamato), mettendolo nell'head sostanzialmente gli dici "Crea un nuovo body con quello che scrivo".

[peppeocchi]

puoi risolvere semplicemente andando a scrivere dentro i tag con innerHTML

[AnGeK82]

Sto in un box model e non so se funziona innerHTML.Come posso fare?
Grazie anticipatamente della risposta.

[peppeocchi]

Non capisco cosa vuoi dire...Perdona la mia ignoranza...
Perchè non dovrebbe funzionare?

[AnGeK82]

Scusami sono appena neanche alla sufficienza della conoscenza JS dove devo metterlo nel mio script?Grazie e scusa della mia ignoranza.

[peppeocchi]

In questo momento non ho il tempo di scrivere uno script adatto alla tua pagina, ho lavoro da fare e non finirò prima di stasera. Ma se ti può essere utile ti posto un piccolo script di creazione di multiselect:

<select name="countries" size="4"
onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A City</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>

<select name="cities" size="4" style="width: 150px"
onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
<script type="text/javascript">
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue",
"Los Angeles|loangelesvalue",
"Chicago|chicagovalue",
"Houston|houstonvalue",
"Austin|austinvalue"]

cities[2]=["Vancouver|vancouvervalue",
"Tonronto|torontovalue",
"Montreal|montrealvalue",
"Calgary|calgaryvalue"]

cities[3]=["London|londonvalue",
"Glasgow|glasgowsvalue",
"Manchester|manchestervalue",
"Edinburgh|edinburghvalue",
"Birmingham|birminghamvalue"]

function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0],
cities[selectedcitygroup][i].split("|")[1])
}
}
</script>

edit:
magari appena finisco di fare questo lavoro, do un'occhiata al tuo codice e ti posto come e dove inserirlo, se non hai già risolto da solo

[AnGeK82]

Grazie tantissimo adesso vedo cosa riesco a fare.Sto facendo un Esame che il prof ha messo sul web per esercitarci.Speriamo bene.Grazie ancora.