June 9
JavaScript è un linguaggio di scripting lato client che offre agli sviluppatori web la possibilità di modificare dinamicamente la maggior parte degli elementi HTML contenuti nelle pagine web, inclusi gli elementi contenuti in elenchi a discesa. In genere, gli sviluppatori web di creare elenchi a discesa utilizzando l'HTML <select> tag e li popolano con i singoli elementi che utilizzano i tag HTML <option>. Ogni opzione collocato in un elenco a discesa ha un indice che è possibile fare riferimento e manipolato tramite la proprietà JavaScript selectedIndex, offrendo agli sviluppatori la capacità di identificare e modificare gli indici e valori selezionati.
1 Aprire un editor di testo e creare un nuovo file chiamato setIndex.html. Aggiungere alcuni tag HTML per il file che includono un tag aperto "<html>", un "<head>" tag di apertura, una stretta "</ head>" tag, un "<body>" tag di apertura, una stretta "< / body> "tag, e una stretta" tag </ html> ".
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Aggiungere un tag "<script>" tra il "<head>" e "</ head>" tag e impostare il <script> attributo type del tag a "text / javascript". Chiudere il tag "</ script>".
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Aggiungere una funzione JavaScript tra le "<script>" e "</ script>" tag e il nome della funzione setIndex (). La funzione setIndex () prende un singolo argomento, posto tra parentesi, il nome di "indexValue". L'argomento indexValue sarà utilizzato per impostare un "<select>" valore dell'indice facendo riferimento alla data proprietà selectedIndex. Aggiungere una parentesi graffa aperta "{" e una stretta parentesi graffa "}" per indicare la posizione del codice della funzione.
<Html>
<Head>
<Script type = "text / javascript">
Funzione setIndex (indexValue)
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Modificare la funzione di setIndex () e utilizzare il metodo getElementById () 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 del valore passato alla funzione setIndex () ( "indexValue").
<Html>
<Head>
<Script type = "text / javascript">
Funzione setIndex (indexValue)
{
document.getElementById ( 'selectbox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Aggiungere un tag "<select>" tra il "<body>" e "</ body>" tag, danno il tag l'id "selectbox", e aggiungono tre "<option>" tag alla casella di selezione. Dare il primo "<option>" tag il testo "Prima selezione" e chiudere il primo "</ option>" tag. Dare la seconda "<option>" tag il testo "Seconda selezione" e chiudere il secondo "</ option>" tag. Dare il terzo "<option>" tag il testo "terza selezione" e chiudere il terzo "</ option>" tag. Chiudere il tag "</ select>".
<Html>
<Head>
<Script type = "text / javascript">
Funzione setIndex (indexValue)
{
document.getElementById ( 'selectbox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body>
<Select id = "selectbox">
<Option> Prima selezione </ option>
<Option> Seconda selezione </ option>
<Option> terza selezione </ option>
</ Select>
</ Body>
</ Html>
6 Aggiungere un "<input>" tag HTML sotto la stretta "</ select>" tag. Dare il tag input id "indexValue" e un attributo di "valore" default "2".
<Html>
<Head>
<Script type = "text / javascript">
Funzione setIndex (indexValue)
{
document.getElementById ( 'selectbox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body>
<Select id = "selectbox">
<Option> Prima selezione </ option>
<Option> Seconda selezione </ option>
<Option> terza selezione </ option>
</ Select>
<Input id = valore "indexValue" = "2">
</ Body>
</ Html>
7 Aggiungere un "<button>" tag HTML sotto il tag "<input>" e aggiungere un evento onClick () al pulsante che chiama la funzione setIndex (). Passare il valore dal campo di input "indexValue" utilizzando il metodo JavaScript getElementById (). Impostare il testo del pulsante "Clicca per impostare l'indice del valore nel campo di input." Chiudere il "<button />" tag e salvare e chiudere setIndex.html.
<Html>
<Head>
<Script type = "text / javascript">
Funzione setIndex (indexValue)
{
document.getElementById ( 'selectbox') selectedIndex = indexValue.;
}
</ Script>
</ Head>
<Body>
<Select id = "selectbox">
<Option> Prima selezione </ option>
<Option> Seconda selezione </ option>
<Option> terza selezione </ option>
</ Select>
<Input id = valore "indexValue" = "2">
<Button onclick = setIndex (document.getElementById ( "indexValue"). Value)> Fare clic per impostare l'indice per il valore nel campo di immissione. </ 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 di selezione della scatola.