JavaScript è un linguaggio di scripting lato client che consente agli sviluppatori web di modificare dinamicamente la maggior parte degli elementi HTML contenuta nelle pagine web, inclusi gli elementi contenuti in elenchi a discesa. In genere, gli sviluppatori web creano elenchi a discesa utilizzando il tag HTML < select > e popolano con singoli elementi utilizzando i tag HTML < opzione >. Ogni opzione posizionato in un elenco a discesa presenta un indice che è possibile fare riferimento e manipolata utilizzando la proprietà selectedIndex JavaScript, dando agli sviluppatori la possibilità di identificare e modificare gli indici selezionati e valori.
Istruzioni
1
Aprire un editor di testo e creare un nuovo file denominato setIndex.html. Aggiungere alcuni tag HTML al file che includono un tag "< head >" aperto, un tag di apertura "< html >", una stretta, un tag di chiusura "< / head >", un tag "< body >" aperto "< / body >" tag e una stretta "< / html >" tag.
< html >
< testa >< / testa >
< corpo >< / corpo >
< / html >
2
Aggiungere un tag "< script >" tra il tag "< / head >" e il "< head >" e impostare attributo type del tag < script > su "text/javascript". Chiudere il tag "< / script >".
< html >
< head >
< script type = "text/javascript" >
< / script >
< / head >
< corpo >< / corpo >
< / html >
3
Aggiungere una funzione JavaScript tra il "< script >" e "< / script >" tag e il nome della funzione setIndex(). La funzione setIndex() accetta un solo argomento, posizionato tra parentesi, denominato "indexValue". L'argomento indexValue verrà essere utilizzato per impostare un valore di indice "< select >" facendo riferimento alla proprietà selectedIndex determinato. Aggiungere una parentesi graffa aperta "{" e una parentesi graffa di chiusura "}" per indicare la posizione del codice della funzione.
< html >
< head >
< script type = "text/javascript" >
funzione setIndex(indexValue)
{
}
< / script >
< / head >
< corpo >< / corpo >
< / html >
4
Modificare la funzione di setIndex() e utilizzare il metodo getElementById () di JavaScript e la proprietà selectedIndex per fare riferimento al valore di indice selezionato di una casella di selezione con l'id "selectBox". Impostare l'indice al valore passato alla funzione setIndex() ("indexValue").
< html >
< head >
< script type = "text/javascript" >
funzione setIndex(indexValue)
{
document.getElementById('selectBox').selectedIndex = indexValue;
}
< / script >
< / head >
< corpo >< / corpo >
< / html >
5
Aggiungere un tag "< select >" tra il "< body >" e "< / body >" tag, dare il tag Identificativo "selectBox" e aggiungere tre tag "< option >" casella di selezione. Dare il primo tag "< option >" il testo "Prima scelta" e chiudere il primo tag "< / option >". Dare il tag "< option >" secondo il testo di "Seconda scelta" e chiudere il secondo tag "< / option >". Dare il terzo tag "< option >" il testo "Terza selezione" e chiudere il terzo tag "< / option >". Chiudere il tag "< / selezionare >".
< html >
< head >
< script type = "text/javascript" >
funzione setIndex(indexValue)
{
document.getElementById('selectBox').selectedIndex = indexValue;
}
< / script >
< / head >
< corpo >
< selezionare id = "selectBox" >
< opzione > prima selezione < / option >
< opzione > seconda selezione < / option >
< opzione > terza selezione < / option >
< / selezionare >
< / body >
< / html >
6
Aggiungere un tag HTML "< input >" sotto il tag di chiusura "< / selezionato >". Dare il tag input l'Identificativo "indexValue" e un attributo di "valore" predefinito "2".
< html >
< head >
< script type = "text/javascript" >
funzione setIndex(indexValue)
{
document.getElementById('selectBox').selectedIndex = indexValue;
}
< / script >
< / head >
< corpo >
< selezionare id = "selectBox" >
< opzione > prima selezione < / option >
< opzione > seconda selezione < / option >
< opzione > terza selezione < / option >
< / selezionare >
< input id = "indexValue" value = "2" >
< / body >
< / html >
7
Aggiungere un tag HTML "< button >" sotto il tag "< input >" e un evento onclick al pulsante che chiama la funzione setIndex(). Passare il valore dal campo di immissione "indexValue" utilizzando il metodo getElementById () di JavaScript. Impostare il testo del pulsante per "Fare clic per impostare l'indice al valore nel campo di input." Chiudere il tag "< / button >" e salvare e chiudere setIndex.html.
< html >
< head >
< script type = "text/javascript" >
funzione setIndex(indexValue)
{
document.getElementById('selectBox').selectedIndex = indexValue;
}
< / script >
< / head >
< corpo >
< selezionare id = "selectBox" >
< opzione > prima selezione < / option >
< opzione > seconda selezione < / option >
< opzione > terza selezione < / option >
< / selezionare >
< input id = "indexValue" value = "2" >
< pulsante onclick=setIndex(document.getElementById("indexValue").value) > fare clic per impostare l'indice al valore nel campo input. < / button >
< / body >
< / html >
8
Aprire setIndex.html in un browser web e fare clic sul pulsante per modificare il valore della casella di selezione "selectBox" a "2". Digitare un valore diverso ("0", "1") nella casella "indexValue" e fare clic sul pulsante per modificare il valore di indice della casella di selezione.
Consigli & Avvertenze
- Indici selezionati possono anche essere impostati e recuperate utilizzando l'attributo "value" e il metodo getElementById.
- Considera che codifica una risposta adeguata, se l'utente tenta di impostare l'indice di elenco a discesa per un valore non valido, ad esempio, utilizzando una finestra di avviso.
- Caselle di selezione possono avvantaggiarsi dei molti stili disponibili in fogli di stile CSS (CSS).
- In genere, selezionare caselle vengono utilizzate come parte di un form HTML che utilizza il tag "< form >".
- Un elenco a discesa che consente selezioni multiple verrà restituito solo l'indice della prima opzione selezionata.
- La proprietà selectedIndex assume valori di indice a partire da 0.