-
Cómo obtener el valor de cuadro combinado con JavaScript
-
JavaScript es un lenguaje de script que puede funcionar como un objeto-orientado y un lenguaje de procedimientos. JavaScript está incluido con la mayoría de los navegadores más importantes y se ejecuta cuando se solicita y se carga una página que incluye el código. JavaScript permite a los desarrolladores web para operar en el modelo de objetos de documento (DOM), establecer y recuperar valores para casi cualquier elemento que forma parte de una página Web, incluyendo objetos complejos tales como valores de la tabla y el cuadro combinado. JavaScript permite a los desarrolladores web para programar páginas Web dinámicas que no requieren una actualización de la página o una solicitud del servidor.Instrucciones
1 Abra un editor de texto y crear un nuevo archivo con el nombre getComboBox.html. Añadir algo de código HTML para getComboBox.html e incluir un <head> y una sección <body>. Guardar getComboBox.html.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Añadir una etiqueta <form> de la sección <body> del archivo. Nombre del formulario comboBoxForm y establecer el atributo de tamaño a 1.
<Html>
<Head>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
</ Form>
</ Body>
</ Html>
3 Añadir una etiqueta HTML <select> entre las etiquetas <form> y </ form>. Nombre del menú seleccione comboBoxMenu y añadir tres HTML etiquetas <option>. Ajuste el primer <opción> valor de texto de la etiqueta a uno, establecer el atributo de valor a 1 y cierre de la etiqueta </ option>. Establecer valor de texto de la segunda etiqueta a dos, establecer el atributo de valor en 2 y cerrar la etiqueta </ option>. Establecer valor de texto de la tercera etiqueta a tres, establecer el atributo de valor a tres y cerrar la etiqueta </ option>. Cierre la </ select> etiqueta de menú.
<Html>
<Head> </ head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
</ Body>
</ Html>
4 Escriba un JavaScript abierta etiqueta <script> y colocarlo entre las etiquetas <head> y </ head>. Configurar <script> valor de tipo de etiqueta en text / javascript y cerrar la </ script> etiqueta.
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
</ Body>
</ Html>
5 Añadir una función de JavaScript a la sección <script> del archivo. Nombre del getComboBox función ().
<Html>
<Head>
<Script type = "text / javascript">
funcionar getComboBox ()
{
}
</ Script>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
</ Body>
</ Html>
6 Escriba un comando de JavaScript que utiliza el objeto documento para leer el valor del valor del menú de cuadro combinado y escribe el valor de una etiqueta <span> que tiene el comboSpan ID.
<Html>
<Head>
<Script type = "text / javascript">
funcionar getComboBox ()
{
SelectedValue = document.comboBoxForm.comboBoxMenu.value;
document.getElementById ( "comboSpan") innerHTML = SelectedValue.;
}
</ Script>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
</ Body>
</ Html>
7 Añadir una etiqueta <p> dentro del HTML "<body>" etiqueta. Introduzca un texto que muestra el mensaje "El valor del cuadro combinado es:" y cerrar la etiqueta <p>. Incluir un espacio después de la coma para separar el texto del valor dinámico.
<Html>
<Head>
<Script type = "text / javascript">
funcionar getComboBox ()
{
SelectedValue = document.comboBoxForm.comboBoxMenu.value;
document.getElementById ( "comboSpan") innerHTML = SelectedValue.;
}
</ Script>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
<P> El valor del cuadro combinado es: </ p>
</ Body>
</ Html>
8 Añadir una etiqueta <span> con la etiqueta <p> y asignar la etiqueta de la comboSpan valor id. Cierre la etiqueta </ span>.
<Html>
<Head>
<Script type = "text / javascript">
funcionar getComboBox ()
{
SelectedValue = document.comboBoxForm.comboBoxMenu.value;
document.getElementById ( "comboSpan") innerHTML = SelectedValue.;
}
</ Script>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
<P> El valor del cuadro combinado es: <span id = "comboSpan"> </ span> </ p>
</ Body>
</ Html>
9 Añadir una etiqueta HTML <botón> para el archivo que tiene el título "Haga clic para mostrar el valor de cuadro combinado". Añadir un evento onclick () con el botón que llama a la función getComboBox () y cierre la etiqueta </ botón>.
<Html>
<Head>
<Script type = "text / javascript">
funcionar getComboBox ()
{
SelectedValue = document.comboBoxForm.comboBoxMenu.value;
document.getElementById ( "comboSpan") innerHTML = SelectedValue.;
}
</ Script>
</ Head>
<Body>
<Form name = tamaño "comboBoxForm" = "1">
<Select name = "comboBoxMenu">
<Option value = "1"> un </ option>
<Option value = "2"> dos </ option>
<Option value = "3"> tres </ option>
</ Select>
</ Form>
<P> El valor del cuadro combinado es: <span id = "comboSpan"> </ span> </ p>
<Botón onclick = "getComboBox ()"> Haga clic para mostrar el valor de cuadro combinado </ botón>
</ Body>
</ Html>
10 getComboBox.html abierta en un navegador Web. Haga clic en el botón titulado "Haga clic para mostrar el valor de cuadro combinado" y verificar que el texto en el comboSpan etiqueta <span> muestra el valor seleccionado en el cuadro combinado comboBoxMenu.
Consejos y advertencias
- Los cuadros combinados se utilizan normalmente para recuperar la entrada del usuario para el envío de formularios. Los datos se transmite de la forma a un script del lado del servidor que gestiona la respuesta.
- El término "cuadro combinado" se refiere a una estructura que permite a un usuario o bien hacer una selección específica o escriba su propia selección si no elige una de las alternativas que se ofrecen. Un campo de texto puede ser utilizado para proporcionar una opción de entrada para los usuarios.
- Los cuadros combinados se utilizan normalmente para recuperar la entrada del usuario. Asegúrese de marcar el cuadro combinado con claridad para que el usuario entienda la pregunta a la que responde.
- La opción "seleccionado" se puede utilizar con la etiqueta <select> para ajustar el elemento en el cuadro combinado que es seleccionado por defecto.
- Cuando se maneja adecuadamente, la propiedad innerHTML puede causar problemas de seguridad.
