Uno Script per abilitare o meno un menu a tendina in base ad una prima scelta
Lunedí, Maggio 12th, 2008Caso mai dovesse servire un doppio menu a tendina ecco un semplice ma altamente utile script che permette di creare una doppia scelta. In un primo menu a tendina si sceglierà un prodotto, ma solo se si seglie il primo prodotto si potrà poi scegliere anche il materiale adatto. Il secondo e il terzo prodotto non prevedono infatti la scelta di alcun materiale.
Per prima cosa fra i tag <head></head> si andrà ad inserire il codice:
<script type=”text/javascript”>
<!–
function dis() {
if (window.document.modulo.prodotto.value == “primo prodotto”) {
window.document.modulo.materiale.disabled = false;
}else{
window.document.modulo.materiale.disabled = true;
}
}
–>
</script>
<!–
function dis() {
if (window.document.modulo.prodotto.value == “primo prodotto”) {
window.document.modulo.materiale.disabled = false;
}else{
window.document.modulo.materiale.disabled = true;
}
}
–>
</script>
Dopodiché, nel <body>, inseriamo il nostro form:
<form action=”#” method=”post” name=”modulo”>
<table>
<tr>
<td>Prodotto*: </td>
<td><select id=”prodotto” name=”prodotto” size=”1″ onchange=”dis()”>
<option value=”nessuna scelta” selected=”selected”>Selezionare un prodotto</option>
<option value=”primo prodotto”> primo prodotto</option>
<option value=”secondo prodotto”> secondo prodotto</option>
<option value=”terzo prodotto”> terzo prodotto</option>
</select></td>
</tr>
<tr>
<td>Materiale*: </td>
<td><select id=”materiale” name=”materiale” size=”1″ disabled=”disabled”>
<option value=”nessuna scelta” selected=”selected”>Selezionare un materiale</option>
<option disabled=”disabled”>Materiali</option>
<option value=”primo materiale”> primo materiale</option>
<option value=”secondo materiale”> secondo materiale</option>
<option value=”terzo materiale”> terzo materiale</option>
<option value=”quarto materiale”> quarto materiale</option>
<option value=”quinto materiale”> quinto materiale</option>
<option value=”sesto materiale”> sesto materiale</option>
</select></td>
</tr>
<table>
<tr>
<td>Prodotto*: </td>
<td><select id=”prodotto” name=”prodotto” size=”1″ onchange=”dis()”>
<option value=”nessuna scelta” selected=”selected”>Selezionare un prodotto</option>
<option value=”primo prodotto”> primo prodotto</option>
<option value=”secondo prodotto”> secondo prodotto</option>
<option value=”terzo prodotto”> terzo prodotto</option>
</select></td>
</tr>
<tr>
<td>Materiale*: </td>
<td><select id=”materiale” name=”materiale” size=”1″ disabled=”disabled”>
<option value=”nessuna scelta” selected=”selected”>Selezionare un materiale</option>
<option disabled=”disabled”>Materiali</option>
<option value=”primo materiale”> primo materiale</option>
<option value=”secondo materiale”> secondo materiale</option>
<option value=”terzo materiale”> terzo materiale</option>
<option value=”quarto materiale”> quarto materiale</option>
<option value=”quinto materiale”> quinto materiale</option>
<option value=”sesto materiale”> sesto materiale</option>
</select></td>
</tr>
</table>
</form>
A questo punto ci si può sbizzarrire con gli stily e magari aggiungere un display:none o display:block qualora si volesse fare direttamente comparire o scomparire il secondo menu in base alla prima scelta.