Come generare un Dropbox Dopo clic su una casella di controllo

August 31

Come generare un Dropbox Dopo clic su una casella di controllo


Rendere gli oggetti appaiono "magicamente" in una pagina Web per imparare ad usare il metodo "CreateElement". Gli sviluppatori web hanno spesso bisogno di creare elementi della pagina, come le caselle personali in tempo reale. Un clic su una casella di controllo, per esempio, può causare un set a comparire accanto alla casella di controllo. Gli utenti possono quindi selezionare una voce dal set facendo clic sulla sua freccia verso il basso, poi cliccando la voce desiderata. Ci vuole meno di una dozzina di righe di codice JavaScript per creare questo effetto casella utile.

istruzione

1 Avviare un editor HTML e aggiungere il seguente codice alla sezione corpo del documento:

<Div id = "CheckBox1">

<Input id = tipo "CheckBox1" = "checkbox" onclick = "addBox ( 'CheckBox1')" />

</ Div>

Questo crea un div che contiene una casella di controllo. "Onclick" evento della casella di controllo chiama una funzione JavaScript denominata "addBox." Tale funzione genera un nuovo set.

2 Aggiungere il seguente codice alla sezione head del documento:

articoli var = [ "voce", "voce"];

Questo oggetto "voci" contiene gli elementi che appariranno nel set.

3 Aggiungere la seguente funzione JavaScript per sezione dello script del documento:

articoli var = [ "voce", "voce"];

Funzione addBox (checkboxID) {

var checkboxObj = document.getElementById (checkboxID);

scatola var = document.createElement ( "select");

for (var i = 0; i <items.length; i ++) {

var newOption = document.createElement ( "opzione");

newOption.text = articoli [i];

box.options.add (newOption);

}

checkboxObj.appendChild (scatola);

}

Questa funzione crea un nuovo set e popola con i valori di prova memorizzati nella matrice "voci". Il metodo "appendChild" aggiunge l'elenco a discesa per il controllo casella di controllo.

4 Salvare il documento. Aprire in un browser e fare clic sulla casella di controllo. La funzione JavaScript genera un set e lo visualizza accanto alla casella di controllo.

Consigli e avvertenze

  • La matrice "voci" in questo esempio contiene due elementi. Aggiungere il numero di elementi a questa matrice come ti piace farli apparire nel set. Si noti che l'evento click del riquadro passa il valore della casella di controllo "id" per la funzione JavaScript. Il tuo evento click deve passare questo valore per la funzione per rendere il codice di lavoro.