Pagine Web può presentare gli elementi di input utente all'interno dei moduli, l'acquisizione dei dati utente e inviarlo agli script lato server. Selezionare e opzione elementi in HTML consentono agli sviluppatori di creare elementi di elenco o casella combinata a discesa. Usando questi, l'utente può selezionare da un insieme di opzioni predefinite. Con l'aggiunta di una funzione JavaScript nella tua pagina, è possibile modificare il contenuto di un elemento select in modo dinamico, come l'utente interagisce con la tua pagina. Gli oggetti selezionare e opzione consentono di creare e aggiungere nuove scelte per gli utenti.

Istruzioni

1

Aggiungere l'elemento select alla tua pagina. Inserire il seguente esempio HTML markup tra i tag di apertura e di chiusura body nella tua pagina Web:

< selezionare id = "selectElement" >
< valore opzione = "gatto" > gatto < / option >
< valore opzione = "cane" > cane < / option >
< valore opzione = "mouse" > Mouse < / option >
< / selezionare >

Questo elemento select presenta tre opzioni che rappresentano diversi animali. È possibile modificare il contenuto delle opzioni in base ai dati che si sta tentando di catturare.

2

Aggiungere una sezione per JavaScript all'interno della pagina. Tra l'apertura e chiusura testa tag nel file, aggiungere il seguente codice di struttura:

< script type = "text/javascript" >
funzioni qui
< / script >

È possibile aggiungere le funzioni JavaScript in questa sezione e gli elementi delle pagine sarà in grado di chiamare loro sull'interazione dell'utente o qualsiasi altro evento. Si può anche includere codice JavaScript in un file separato e aggiungere un link ad esso nella tua testa di pagina, come un'alternativa.

3

Aggiungere una funzione per elaborare il tuo alterazione di selezionare l'opzione. Inserire il seguente schema di funzione tra i tag di script di apertura e di chiusura nella vostra sezione di intestazione di pagina:

Function addOption() () {
implementare l'aggiunta di un'opzione
}

All'interno di questa funzione, è possibile aggiungere il codice per modificare dinamicamente il contenuto del vostro elemento select. È possibile impostare la pagina per chiamare questa funzione su un evento che si adatta alle funzionalità della tua pagina.

4

Implementare l'operazione di aggiunta select dinamica. All'interno la funzione JavaScript, come il codice riportato di seguito per ottenere un riferimento all'elemento select nella tua pagina:

var selectElem = document.getElementById("selectElement");

È in alternativa possibile passare l'attributo ID di elemento select come parametro se questo si adatta la tua pagina. Questo codice archivia un riferimento all'elemento in una variabile. Inserire il codice seguente per aggiungere una nuova opzione per l'elemento select:

selectElem.add (nuova opzione ("Pollo", "pollo"), null);

Questo codice crea un nuovo oggetto di opzione; quindi lo aggiunge all'elemento select passandolo come parametro per la funzione add. Il codice di creazione il nuovo opzione oggetto passa il contenuto e il valore dell'opzione a comparire all'interno della pagina, così modificare in base alle proprie esigenze.

5

Chiamare la funzione JavaScript. È possibile eseguire la funzione sull'interazione dell'utente con gli altri elementi nella pagina, ma per la dimostrazione è possibile modificare l'apertura tag body come segue:

< onload="addOption() del corpo" >

Questo chiamerà la funzione appena il browser dell'utente viene caricata la pagina. Salvare il file HTML e aprirlo in un browser. Scegliere l'elemento select per vederne il contenuto. Si dovrebbe vedere l'opzione nuova codice aggiunto insieme alle opzioni originale delineate nel codice HTML.

Consigli & Avvertenze

• È inoltre possibile modificare la proprietà di selezionare gli elementi in modo dinamico, ad esempio lo stile.
• JavaScript può essere imprevedibile in alcuni browser, così testare le pagine ben.