I visitatori del sito di solito click caselle a discesa per aprirli. Gli sviluppatori mettono questi controlli compatti, noto anche come selezionare le caselle, sulle pagine Web per risparmiare spazio. Fino a quando un utente fa clic su un menu a tendina, che occupa solo una riga in una pagina Web, anche se può contenere centinaia di articoli. Se volete dare agli utenti la possibilità di aprire e chiudere una casella a discesa mediante un pulsante HTML, collegare questi due controlli utilizzando una funzione JavaScript.

istruzione

1 Avviare un editor HTML o qualsiasi editor di testo, e aprire uno dei tuoi documenti HTML.

2 Aggiungere il codice riportato di seguito per la sezione corpo del documento:

<Select id = "dropDownBox1">

<Option> A </ option>

<Option> B </ option>

<Option> C </ option>

<Option> D </ option>

</ Select>

<Input type = valore "pulsante" = "Apri Drop Down" onclick = "openDropdown ( 'dropDownBox1', '3')" />

Questo codice crea un menu a tendina e un pulsante. Quando si fa clic sul pulsante, si richiama una funzione JavaScript denominato openDropdown. Il pulsante passa anche il valore id della casella a discesa per la funzione insieme al numero 3.

3 Aggiungere il seguente codice JavaScript alla sezione head del documento:

Funzione openDropdown (discesa, dimensioni) {

var dropDownObject = document.getElementById (discesa);

dropDownObject.size = dimensione;

}

Questa funzione - chiamata dal pulsante - ottiene un riferimento alla casella a discesa e imposta il suo valore dimensione alla dimensione passata alla funzione nella lista degli argomenti.

4 Salvare il documento, e lanciare il browser. Aprire il documento nel browser. La casella a discesa appare sopra il pulsante nella pagina Web.

5 Fare clic sul pulsante. Il codice viene eseguito e apre la casella a discesa automatica.

Consigli e avvertenze

• Si noti che l'evento click del pulsante passa il numero 3 per la funzione JavaScript, anche se quattro elementi presenti nella casella a discesa. Quando si chiama la funzione in una pagina Web vera e propria, passare qualsiasi valore che ti piace. Non è necessario passare un valore che è uguale al numero di elementi nella casella a discesa. Si potrebbe anche aggiungere un altro pulsante che chiude la casella a discesa quando si fa clic. Creare un tale tasto duplicando il codice del pulsante descritto nei passaggi precedenti e passando zero alla funzione JavaScript anziché 3.