Hvordan endre en Drop-Down Index i Javascript

October 7

Javascript gir deg muligheten til å endre dynamisk innhold på en brukers nettleser skjermen fordi manuset ligger og kjører inne i brukerens nettleser. For eksempel kan du endre en drop-down indeksverdi på Javascript ved å få elementets indeksverdi i <velg> array og endre teksten eiendommen til det elementet. Du bør tilordne et navn til den form og det <Velg> element i form for å gjøre det enkelt å referere dem.

Bruksanvisning

1 Opprette en webside som vil tillate en bruker å bestille rekvisita og vil endre navnet på elementet for å "Utsolgt" når det ikke er mer igjen. Opprette et HTML-dokument med Notepad eller en HTML-editor og legge til HTML-overskrifter i dokumentet:

<! DOCTYPE HTML>

<Head>

<Title> Bestill rekvisita </ title>

2 Legg Javascript-kode for å spore inventar og endre elementnavnet til Utsolgt når lageret går til null. Initial globale variabler med start inventar for hvert element:

Var blyanter = 5;

Var papir = 5;

Var stifte = 5;

3 Opprett en Javascript-funksjon som får elementet valgt når brukeren klikker en ordre knapp. Bruk "selectedIndex" eiendom for å få varen indeksen og "text" eiendommen for å få navnet sitt:

funksjon for () {

var index = document.supplies.items.selectedIndex;

Var elementer = document.supplies.items [index] .text;

4 Sett et flagg som indikerer en eks er utsolgt til "false:"

var soldOut = false;

5 Minske inventar for det valgte elementet. Hvis beholdningen faller til null, endre rullegardin indeksen teksten til «Utsolgt:"

switch (items) {

case "Pencil":

--pencils;

if (blyanter == 0) soldout = true;

gå i stykker;

case "Paper":

--papir;

if (papir == 0) soldout = true;

gå i stykker;

case "Stapler":

--staplers;

if (stiftemaskiner == 0) soldout = true;

gå i stykker;

}

if (soldout) document.supplies.items [index] .text = "Utsolgt";

}

</ Script>

</ Head>

6 Lag HTML-skjemaet og gi den navnet du brukte i Javascript-funksjonen. Lag drop-down boks med <velg> tag og bruke navn fra Javascript-funksjonen. Legg elementene med <alternativ> tag og legge til en knapp for å ringe Javascript-funksjonen:

<Body>

<Option> Blyant </ option>

<Option> Paper </ option>

<Option> Stifte </ option>

</ Velge>

</ Form>

</ Body>

</ Html>

7 Lagre HTML-fil. Åpne den i en nettleser og teste funksjonaliteten.