Cómo obtener el valor de una lista desplegable en HTML

aplicaciones Web a menudo necesitan saber el valor de un elemento que un usuario selecciona. Si este elemento es un cuadro de texto u otro control básico, la aplicación puede simplemente examinar la propiedad "Texto" del control para obtener su valor. También se puede determinar el valor seleccionado en un control más avanzado, como una lista desplegable HTML. Las listas desplegables pueden contener un pequeño número de elementos, como los días de la semana, o cientos de artículos extraídos de una base de datos de productos. Habilite la página Web para detectar elementos desplegables seleccionados mediante la adición de una simple función JavaScript para el documento HTML.

Instrucciones

1 Lanzar cualquier editor HTML o el Bloc de notas y abra uno de sus documentos HTML.

2 Copia el código se muestra a continuación y pegarlo en la sección del cuerpo del documento:

<Select id = "DropDown1">

<Option value = A> Opción A </ option>

<Option value = B> Opción B </ option>

<Option value = C> Opción C </ option>

<Option value = D> Opción D </ option>

</ Select>

<Input type = "button" value = "Valor desplegable Mostrar" onclick = "checkDropDown ( 'DropDown1')" />

El botón de entrada pasa el nombre de una lista desplegable a una función de JavaScript que determina el valor seleccionado de la lista. El código anterior define el botón de la lista desplegable.

3 Agregue el código siguiente a la sección de la escritura del documento HTML:

función checkDropDown (id) {

var dropDownObject = document.getElementById (id);

var = dropDownObject.value seleccionada;

alert ( "Valor seleccionado =" + seleccionado);

}

Esta función - llamado por el clic de botón - obtiene la lista desplegable objeto y comprueba su propiedad value. La función también almacena ese valor en la variable llamada "seleccionado". Un cuadro de alerta muestra ese valor en este ejemplo, pero se puede utilizar este valor como desee.

4 Guarde el documento. Lance un navegador, y ver el documento. Verá la lista desplegable y el botón.

5 Haga clic en la lista desplegable y, a continuación, haga clic en uno de los elementos de la lista. Haga clic en el botón "Mostrar desplegable de Valor". La función de JavaScript se ejecuta y muestra el valor seleccionado.

Consejos y advertencias

• Si se trabaja con múltiples listas desplegables, determinar sus valores seleccionados por el que pasa sus valores de ID a la función "checkDropDown".