Pagine Web hanno loro proprio elemento dell'interfaccia utente specifico, il collegamento ipertestuale. Tuttavia, pagine Web possono anche utilizzare molti tipi di interfacce native al sistema operativo del computer, come le barre di scorrimento, le caselle di controllo e menu a tendina. Utilizzare il tag "selezionare" in HTML per inserire un menu a discesa sulla tua pagina Web e utilizzare codice JavaScript per renderlo a rispondere in modo dinamico quando l'utente seleziona un elemento da esso. È possibile fare un menu a discesa sulla tua pagina Web risponda in modo ricco, facile da usare, proprio come un normale software di interfaccia.

Istruzioni

1

Aggiungere il seguente codice al corpo del documento HTML:

< selezionare onChange="menuAction(this);" >

< valore opzione = "cmd1" > comando 1 < / option >

< valore opzione = "cmd2" > Command 2 < / option >

< option value = "cmd3" > comando 3 < / option >

< / selezionare >

Questo codice genera un menu a discesa con tre elementi. L'attributo "onChange" del tag "selezionare" attiva una funzione JavaScript quando l'utente seleziona un nuovo elemento.

2

Aggiungere il seguente codice tra i tag di "head" del documento HTML per dichiarare la funzione di "menuAction" che sarà innescata dai menu a discesa:

< script type = "text/javascript" >

Function menuAction(menu) () {

Alert(menu.Options[menu.SelectedIndex].Value);

}

< / script >

Questa funzione semplicemente presenta una finestra di dialogo che informa l'utente quale elemento hanno scelto dal menu a discesa. Il riferimento di Document Object Model per il tag "select" è passato alla funzione utilizzando la parola chiave "this", così è possibile creare molti diversi menu a discesa, ciascuno utilizzando la stessa funzione di JavaScript.

3

Utilizzare un'istruzione switch nella funzione "menuAction" per eseguire il codice JavaScript specifico, a seconda di quale elemento l'utente seleziona in un menu a discesa. Ecco un esempio di funzione "menuAction" che esegue un codice diverso a seconda di ciò che l'utente seleziona:

Function menuAction(menu) () {

Switch(menu.Options[menu.SelectedIndex].Value)

{

caso "cmd1":

Alert ("si è scelto il comando 1");

Break;

caso "cmd2":

Window.location.assign (la "http://www.ehow.com");

Break;

caso "cmd3":

menu.Style.Visibility = "hidden";

Break;

}

}

Includere la dichiarazione di "rompere" per ogni "caso" per assicurarsi che un solo comando è eseguito. L'attributo "value" del tag "opzione" determina quale codice ottiene eseguito, indipendentemente da quale viene utilizzato il menu a discesa.

4

Utilizzare "optgroup" tag per organizzare le voci di menu in gruppi separati. Ecco un esempio:

< selezionare onChange="menuAction(this);" >

< optgroup etichetta = "Group1" >

<option value="cmd1">Command 1</option>

<option value="cmd2">Command 2</option>

< / optgroup >

< optgroup etichetta = "Group2" >

<option value="cmd3">Command 3</option>

<option value="cmd4">Command 4</option>

< / optgroup >

< / selezionare >

Consigli & Avvertenze

• Aggiungere una voce di menu "fittizio" nella parte superiore di un menu a discesa per dare risalto all'utente che nessun comando è stato ancora selezionato. Digitare qualcosa come "Selezionare un comando..." tra il primo tag "option".
• Utilizzare l'attributo "size" del tag "Seleziona" per limitare il numero di elementi che saranno visibili in un menu a discesa in una sola volta. Verrà visualizzata una barra di scorrimento, se sono presenti più elementi nel menu rispetto al valore di "dimensioni".