Come modificare un menu a discesa Indice in JavaScript

August 19

JavaScript ti dà la possibilità di modificare dinamicamente i contenuti sullo schermo browser di un utente perché lo script risiede e viene eseguito all'interno del browser dell'utente. Ad esempio, è possibile modificare un valore indice di discesa in JavaScript ottenendo valore di indice del elemento dell'array <select> e modificando la proprietà di testo di tale elemento. Si dovrebbe assegnare un nome alla forma e alla <select> elemento in forma per rendere più facile fare riferimento a loro.

istruzione

1 Creare una pagina Web che permetterà all'utente di ordinare materiali di consumo e cambierà il nome della voce da "tutto esaurito" quando non ci sono più a sinistra. Creare un documento HTML con il blocco note o un editor HTML e aggiungere le intestazioni HTML al documento:

<! DOCTYPE HTML>

<Html lang = "it">

<Head>

<Meta charset = "utf-8">

<Title> Ordina materiali di consumo </ title>

2 Aggiungere il codice Javascript per monitorare l'inventario e cambiare il nome della voce di Sold Out quando l'inventario va a zero. Inizializzare le variabili globali con l'inventario di partenza per ogni voce:

<Script>

var matite = 5;

var carta = 5;

var cucitrici = 5;

3 Creare una funzione JavaScript che ottiene l'elemento selezionato quando l'utente fa clic su un pulsante di ordine. Utilizzare la proprietà "selectedIndex" per ottenere l'indice della voce e il "testo" di proprietà per ottenere il suo nome:

ordine function () {

var index = document.supplies.items.selectedIndex;

articoli var = document.supplies.items [index] .text;

4 Impostare un flag che indica gli articoli è venduto a "false"

var soldOut = false;

5 Diminuire l'inventario per l'elemento selezionato. Se l'inventario scende a zero, modificare il testo indice di discesa per "tutto esaurito:"

switch (items) {

caso "matita":

--matite;

if (matite == 0) Soldout = true;

rompere;

caso "Carta":

--carta;

if (carta == 0) Soldout = true;

rompere;

caso "cucitrice":

--staplers;

if (cucitrici == 0) Soldout = true;

rompere;

}

if (Soldout) document.supplies.items [index] .text = "tutto esaurito";

}

</ Script>

</ Head>

6 Creare il modulo HTML e assegnare il nome utilizzato nella funzione JavaScript. Creare la casella a discesa con il tag <select> e utilizzare il nome dalla funzione JavaScript. Aggiungere le voci con il tag <option> e aggiungere un pulsante per chiamare la funzione JavaScript:

<Body>

<Form name = "forniture">

<Select name = "voci">

<Option> matita </ ​​option>

<Option> Carta </ ​​option>

<Option> cucitrice </ option>

</ Select>

<Input type = "button" name = "addtoorder" value = "ordine ();" "Ordine" onclick =>

</ Form>

</ Body>

</ Html>

7 Salvare il file HTML. Aprire in un browser e verificare la funzionalità.