JavaScript/Oggetto document: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
proseguo
Ramac (discussione | contributi)
finito, finalmente :-D
Riga 148:
</source>
 
==== Liste ====
Analizziamo per ultimo gli elementi <code>&lt;select&gt;</code>, che servono per creare liste e menu a tendina. Prendiamo il seguente spezzone di codice HTML in un ipotetico form chiamato "dati":
<source lang=html4strict>
<select name=città size=5>
<option value=mi>Milano</option>
<option value=to>Torino</option>
<option value=pe>Pescara</option>
<option value=pa>Palermo</option>
</select>
</source>
Questo codice crea un oggetto ''select'' accessibile come sempra con la sintassi <code>document.dati.città</code>. Questo espone alcune proprietà interessanti:
* '''value''' è il valore del campo del modulo (nel nostro caso potrà essere ''mi'', ''to'', ecc...)
* '''option''' è un'array contenente un riferimento a ciascun oggetto ''option'' appartenente all'elenco
* '''selectedIndex''' restituisce l'indice dell'elemento al momento selezionato dall'utente (Milano sarà 0, Torino 1, ecc...)
Ogni oggetto ''option'' espone le seguenti proprietà:
* '''value''' indica il suo valore
* '''text''' indica il testo che mostrerà all'utente
* '''index''' restituisce la sua posizione nell'array.
Ad esempio, associamo all'evento ''onchange'' del campo "città" alla seguente funzione:
<source lang=javascript>
function mostraCittà() {
var testo = document.dati.città.option[document.dati.città.selectedIndex].text;
}
</source>
Cliccando su ciascuna opzione otterremo così un'alertbox contenente la città selezionata.
 
===== Inserire e aggiungere elementi =====
Per inserire o aggiungere nuovi elementi è sufficiente creare un nuovo oggetto ''option'' e assegnarlo ad una posizione dell'array:
<source lang=javascript>
var nuovaOpzione = new Option("Bologna", "bo");
document.dati.città.options[0] = nuovaOpzione;
</source>
L'esempio appena visto aggiunge la città "Bologna" come primo elemento della lista. Il browser si occuperà poi di far scalare le posizioni degli altri elementi dell'array. Per eliminare un'opzione è sufficiente assengare all'elemento dell'array il valore ''null'':
<source lang=javascript>
document.dati.città.options[2] = null;
</source>
La seguente funzione aggiunge una città come ultimo elemento nella lista:
<source lang=javascript>
function aggiungiCittà () {
var testo = prompt("Che città vuoi aggiungere?");
var sigla = prompt("Inserisci la sigla della città");
var nuovaCittà = new Option(testo, sigla);
document.dati.città.options[document.dati.città.options.length] = nuovaCittà
}
</source>
[[Categoria:JavaScript|Oggetto document]]
{{avanzamento|75100%}}