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>