Come assegnare un valore nascosto da un giù goccia in Javascript

March 13

Come assegnare un valore nascosto da un giù goccia in Javascript


JavaScript è un linguaggio che è ampiamente utilizzato per modificare le interfacce utente in modo dinamico. Utilizzando JavaScript, gli sviluppatori Web possono accedere agli elementi che fanno parte del modello a oggetti documento HTML, direttamente identificazione, valutazione e manipolare gli elementi che compongono le pagine HTML. elementi DOM HTML sono semplicemente elementi HTML e hanno una varietà di attributi tipicamente disponibili. Questi attributi, inclusi gli attributi di visibilità, possono avere i loro valori alterati in modo dinamico, aggiunti o eliminati in base alle azioni intraprese da parte dell'utente finale, come ad esempio la selezione di un valore da un menu a discesa.

istruzione

1 Aprire un editor di testo e creare un nuovo file di testo denominato dropdownHidden.html. In genere, la selezione di "Nuovo" dal menu "File" crea nuovi file.

2 Aggiungere alcuni tag HTML di base per il file, tra cui un tag <html>, un tag <head>, a </ head> tag, un tag <body>, a </ body> e un tag </ html>.

3 Aggiungere un tag <script> aperta e una stretta </ ​​script> tag al file. Impostare il tipo di script di attribuire a "text / javascript". Qualsiasi testo inserito tra questi due delimitatori verrà considerato codice JavaScript quando la pagina viene caricata.

4 Dichiarare una funzione JavaScript denominata "storeVal ()" e aggiungere un riccio parentesi aperta - {- e una stretta parentesi graffa -} - per indicare la posizione del corpo della funzione. La funzione storeVal non ha argomenti.

5 Dichiarare una variabile denominata "hiddenId" tra parentesi graffe di apertura e chiusura della funzione del storeVal (). Utilizzare il metodo JavaScript document.getElementById per recuperare la posizione di un campo di input nascosto con l'id "HiddenField".

6 Dichiarare una seconda variabile chiamata "dropDownId" sulla linea dopo la variabile hiddenId. Utilizzare il metodo document.getElementById per recuperare la posizione del menu a discesa che verrà utilizzato per popolare il campo di input nascosto.

7 Dichiarare una terza variabile denominata "selectedElement" sulla linea dopo la variabile dropDownId. Utilizzare il riferimento dropDownId per recuperare l'indice per l'elemento selezionato dal menu a discesa.

8 Impostare il "hiddenId" "valore" della variabile nella variabile "selectedElement". Aggiungere questo codice sulla linea dopo la variabile selectedElement.

9 Creare un menu a discesa HTML inserendo un tag <select> tra i tag <body> e </ body> tag in dropdownHidden.html. Dare il valore di un tag <select> "id" di "discesa". Utilizzare un evento "onClick" per chiamare la funzione storeVal quando l'utente seleziona una voce dal menu a discesa. Assegnare un tag <option> per il menu <select> con un valore di "A". Etichettare il <option> tag "A" e chiudere il tag </ option>. Assegnare un secondo tag <option> per il menu <select> con un valore di "B". Etichettare il <option> tag "B", chiudere il tag </ option> e chiudere il tag </ select>.

10 Aggiungere un HTML <input> tag al file immediatamente dopo il tag </ select>. Dare il tag <input> un attributo di tipo "nascosto" e la "HiddenField" id. Salvare e chiudere dropdownHidden.html. DropdownHidden.html apparirà come illustrato di seguito:

<Html>

<Head>

<Script type = "text / javascript">

funzione storeVal ()

{

var hiddenId = document.getElementById ( "HiddenField");

var dropdownId = document.getElementById ( "discesa");

var = selectedElement dropdownId.options [dropdownId.selectedIndex] .value;

hiddenId.value = selectedElement;

}

</ Script>

</ Head>

<Body>

<Select id = "discesa" onChange = "storeVal ();">

<Option value = "A"> A </ option>

<Option value = "B"> B </ option>

</ Select>

<Input type = "hidden" id = "HiddenField">

</ Body>

</ Html>

11 Aprire dropdownHidden.html in un browser Web. Selezionare la voce "A" dal menu a tendina per salvare il valore per il campo nascosto. Poiché il campo è nascosto, sarà leggermente complicato per verificare il codice visivamente. Fare riferimento alla sezione Suggerimenti per aiuto.

Consigli e avvertenze

  • Il modello di oggetto documento HTML comprende una serie di oggetti, tra cui immagini e forme.
  • Un campo di input con l'attributo di tipo "nascosto" non apparirà quando si verifica il codice che inserisce le informazioni in un campo nascosto. Provare a cambiare l'attributo type di "text" durante i test.
  • Gli altri valori che possono essere utilizzati con il tag <input> includono casella di testo, password, radio, inviare, ripristinare, un file nascosto, l'immagine e il pulsante.
  • Alcune lievi differenze possono esistere nel DOM HTML nelle vecchie versioni di browser. La maggior parte di queste differenze sono stati risolti nei browser più recenti.