Il tag select in HTML viene normalmente utilizzato per creare un menu a discesa. Tuttavia, se si regola il relativo attributo di dimensione, il tag select creato un oggetto listbox. Un controllo listbox è un'interfaccia con un elenco di opzioni che l'utente può selezionare facendo clic su loro. Accesso potente di JavaScript al Document Object Model HTML o DOM, consente di modificare in modo dinamico un elemento listbox dopo che la pagina è caricata in modo che a livello di codice possibile selezionare, aggiungere e rimuovere elementi da esso basato sull'input dell'utente.

Istruzioni

1

Aggiungere il seguente codice Javascript tra i tag head del documento HTML:

< script type = "text/javascript" >

Function selectItem(ref,index) () {

document.getElementById(ref).selectedIndex = index;

}

< / script >

Questa funzione accetta due argomenti: un riferimento all'attributo id del controllo listbox che deve essere cambiato e il numero dell'elemento da selezionare. Si noti che gli elementi sono numerati a partire da 0, quindi per selezionare il primo elemento di un controllo listbox con l'id "lbox", è necessario chiamare la funzione in questo modo:

selectItem("lbox",0);

2

Aggiungere la seguente funzione tra i tag script nella sezione head del documento HTML per aggiungere elementi a un controllo listbox:

Function addItem(ref,name,index) () {

ref = document.getElementById(ref);

var newopt=document.createElement("option");

newopt.text=name;

ref.add(newopt,ref.options[index]);

ref.size=ref.options.length;

}

L'argomento "ref" è, come prima, l'id del controllo listbox. "Nome" è il nome della nuova opzione da aggiungere. L'argomento di "indice" è facoltativo..--se la funzione è un numero per esso, il nuovo elemento verrà inserito in corrispondenza dell'indice specificato. In caso contrario, l'elemento verrà visualizzato alla fine del controllo listbox. L'ultima riga della funzione ridimensiona l'elenco per assicurarsi che tutte le opzioni adattare. Se si desidera che il listbox per soggiornare ad un'altezza fissa, rimuovere questa riga.

3

Inserire la funzione seguente tra i tag di script per rimuovere elementi da un controllo listbox:

Function removeItem(ref,index) () {

ref = document.getElementById(ref);

ref.remove(index);

ref.size=ref.options.length;

}

Come con "addItem," Se si intende mantenere il controllo listbox a un'altezza 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 di "parseInt", basta prestare attenzione al modo in cui che le funzioni vengono chiamate dagli elementi di "input".

< selezionare id = "lbox" size = "3" >

Un elemento < opzione > < / option >

< opzione > articolo due < / option >

< opzione > articolo tre < / option >

< / selezionare >

Testo di input o indice:

< input id = "input" type = "text" / >

< input type = "pulsante" valore = "Selezionare dall'indice" onClick="selectItem('lbox',parseInt(document.getElementById('input').value));" / >

< input type = "button" valore = "Aggiungi elemento" onClick="addItem('lbox',document.getElementById('input').value);" / >

< 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 il controllo listbox. È possibile modificare diversi controlli ListBox utilizzando le stesse funzioni assegnare ogni oggetto listbox un attributo id univoco, quindi utilizzando i rispettivi ID quando si chiamano le funzioni.

Consigli & Avvertenze

• È anche possibile aggiungere e rimuovere optgroup elementi a una classe listbox utilizzando il metodo add.