November 27
Il tag di selezione in HTML viene normalmente utilizzato per creare un menu a discesa. Tuttavia, se si regola il suo attributo dimensione, il tag select crea una casella di riepilogo. Una casella di riepilogo è un'interfaccia con un elenco di opzioni che l'utente può selezionare da cliccando loro. potente accesso di Javascript al Document Object Model HTML, o DOM, consente di modificare dinamicamente un elemento di casella di riepilogo dopo che la pagina è stata caricata in modo da poter selezionare a livello di codice, aggiungere e rimuovere elementi da esso in base all'input dell'utente.
1 Aggiungere il seguente codice JavaScript tra i tag head del documento HTML:
<Script type = "text / javascript">
Funzione selectItem (ref, index) {
document.getElementById(ref).selectedIndex = index;
}
</ Script>
Questa funzione prende due argomenti: un riferimento per l'attributo id della casella di riepilogo che dovrebbe essere cambiato, e il numero della voce da selezionare. Notare che le voci sono numerati a partire da 0, quindi per selezionare il primo elemento di una casella di riepilogo con l'id "lbox," si dovrebbe chiamare la funzione in questo modo:
selectItem ( "lbox", 0);
2 Aggiungere la seguente funzione tra i tag script nella testa del documento HTML per aggiungere elementi a una casella di riepilogo:
Funzione addItem (ref, nome, indice) {
ref = document.getElementById(ref);
var newopt = document.createElement ( "opzione");
newopt.text = nome;
ref.add (newopt, ref.options [index]);
ref.size = ref.options.length;
}
L'argomento "ref" è, come prima, l'id della casella di riepilogo. "Nome" è il nome della nuova opzione per aggiungere. L'argomento "index" è facoltativo - se si fornisce la funzione di un numero per esso, il nuovo elemento verrà inserito in corrispondenza dell'indice specificato. In caso contrario, l'oggetto apparirà alla fine della casella di riepilogo. L'ultima riga della funzione ridimensiona l'elenco per assicurarsi che tutte le opzioni in forma. Se si desidera che il listbox a rimanere a quota fissa, rimuovere questa riga.
3 Posizionare la seguente funzione tra i tag di script per rimuovere elementi da una casella di riepilogo:
Funzione removeItem (ref, index) {
ref = document.getElementById(ref);
ref.remove (indice);
ref.size = ref.options.length;
}
Come con "addItem," se avete intenzione di mantenere la vostra casella di riepilogo a quota fissa, rimuovere la riga finale di questa funzione.
4 Aggiungere il seguente codice al corpo del documento HTML per testare queste funzioni. Non preoccuparti per dettagli come il metodo "parseInt", basta prestare attenzione al modo in cui le funzioni sono chiamate dagli elementi di "input".
<Select id = "lbox" size = "3">
<Option> Articolo Uno </ option>
<Option> Articolo Due </ option>
<Option> Articolo Tre </ option>
</ Select>
testo di input o di un indice:
<Input id = "input" type = "text" />
<Input type = valore "pulsante" = "Seleziona da Index" onclick = "selectItem ( 'lbox', parseInt (document.getElementById ( 'input') value).);" />
<Input type = valore "pulsante" = "Aggiungi elemento" onclick = "addItem ( 'lbox', document.getElementById ( 'input') il valore.);" />
<Input type = valore "pulsante" = "Rimuovi elemento all'indice" onclick = "removeItem ( 'lbox', parseInt (document.getElementById ( 'input') value).);" />
5 Salvare il documento HTML, aprirlo in un browser Web e utilizzare i controlli per modificare dinamicamente la casella di riepilogo. È possibile modificare diverse listboxes utilizzando le stesse funzioni assegnando ad ogni casella di riepilogo proprio attributo ID univoco, quindi utilizzando i rispettivi ids quando si chiama la funzione.