En ocasiones en nuestros proyectos web realizados con HTML, ASP o PHP requerimos obtener con JavaScript los datos de un control de formulario select también conocido por algunas personas como Control ComboBox o DropDownList; todo dependiendo del lenguaje o arquitectura de programación que estemos usando.
Pero bien, encontrar el valor de un select es realmente sencillo, pero se complica un poco cuando necesitamos capturar también el texto, es decir, la etiqueta que el visitante o usuario visualiza al momento de desplegar las opciones del control; para ello seguiremos los siguientes pasos:
Talvez te interese: Obtener valores y texto de un select con jquery y descargar archivos según selección
Estructura HTML
Primeramente, agregamos a nuestro documento HTML el control de servidor select, como se muestra a continuación:
1 2 3 4 5 | <select id="producto" name="producto" onchange="ShowSelected();"> <option value="12">Texto One</option> <option value="13">Texto Two</option> </select> |
Código Javascript
Luego, tendremos que escribir nuestra función utilizando para ello lenguaje Javascript.
5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript"> function ShowSelected() { /* Para obtener el valor */ var cod = document.getElementById("producto").value; alert(cod); /* Para obtener el texto */ var combo = document.getElementById("producto"); var selected = combo.options[combo.selectedIndex].text; alert(selected); } </script> |
Lo que hacemos para obtener el texto del control de formularios select es acceder a las etiquetas option las cuales son elementos HTML por si solas. Para ello instanciamos el select y posteriormente encontramos el nodo option seleccionado para obtener el atributo text desde javascript.
Jajaja gracias salvaste mi proyecto 😀 saludos desde puebla.
hola!! muy bueno sus conocimientos como haría para que el valor que retorna por alert, me retorne a otra vista?
estoy aplicando para seleccionar la talla de una prenda pero quisiera mostrarla en otra vista pero ya no como una alerta sino dentro de una etiqueta html, de ante mano gracias por cierto el desarrollo lo llevo en laravel. tus conocimientos son de mucha ayuda
Muchas gracias por el aporte, quería saber si hay una manera de realizar algo parecido pero con radio button, ejemplo;
<input type=»radio» name=»rdoEjemplo» id=»valor1″ value=»A»>
<label for=»valor1″>Primer Ejemplo de texto</label>
<input type=»radio» name=»rdoEjemplo» id=»valor2″ type=»radio» value=»B»>
<label for=»valor2″>Segundo Ejemplo de texto</label>
<input type=»radio» name=»rdoEjemplo» id=»valor3″ type=»radio» value=»B»>
<label for=»valor3″>Tercer Ejemplo de texto</label>
En este caso quiero que me retorne el texto del <label> que tiene relacion con el «ID» del input y no el «value», para no comprar uno por uno.
De antemano gracias.
Graciaaas, me ayudaste un montón
Muchísimas Gracias!!! No sabes la mano que me diste. Qué clara la explicación!!! Aplausos
GRACIAS
Sos un crack!!!!!!!!!!!!!!!
Hola buenos dias,como haria para obtener ese valor en un servlets ?
Hola, estoy intentando obtener un valor de un select pero usando la opción .find sin embargo se me vienen todos los valores.
El select está dentro de un TD de una tabla
var usuario = $(this).find(‘td’).eq(1).text();
Hola como se aplicaría para un select?
Hola buenas, necesito enviar la opcion seleccionada a una base de datos en mysqli. Como podría hacer para que se envie el text y no el value? Actualmente lo envio mediante un formulario post. Muchas gracias.
Hola. Tengo un select lleno con algunos datos, y necesito seleccionar uno en particular desde javascript. ¿cómo se haría eso?
Muchas Gracias Amigo.. Un Abrazo…
hola tengo una pregunta como puedo hacer para enviar un texto desde un combo a un fieldbox pero haciendo click en un button
tengo un ejemplo no se si estaré en lo correcto
function agregarTexto{ //button var items=$("input[name='ID_Ejec_Texto']"); //hace una llama al ID var combo =$("ID_Ejec_Texto"); var agrearTexto = combo.options[combo.selectIndex].click; }igual tengo algunas dudas aun creo que necesito algo mas para que funcione pero no se que 😀
Gracias hermano, estamos haciendo el proyecto un dia antes y nos salvaste. te amo. besos en la cola
excelente
Lo probé y me funcionó con el género.
Consulta, en un radiobutton cómo haría para seleccionar el género, ya que tengo problemas y no me guarda en la base de datos, al inspeccionar veo que no me lectura el valor.
Buenas, quisiera saber como hacer un multi selector sin necesidad de librerías.
Alguien me podría ayudar?
Hola buenas tardes teengo una duda
Como puedo lograr enviar el resultado de un label (Por ejemplo que el label tenga la palabra Fruta) y cuando le de click a un boton que esa palabra se plasme en un combobox. estoy usando jquery
Hola, como se haria en mvc.net con un DropDownListFor?.
@Html.DropDownListFor(model => model.Partida, (IEnumerable<SelectListItem>)ViewBag.Partidas, Multilenguaje.LblSeleccionar,
new
{
@class = «form-control»
})
excelente y facil aprender con sus ayudas, muy puntuales. Gracias
Eres un máquina crack;
la variable que se declara en javascript (var selected) donde se esta almacenando el valor del combobox como puedo guardarlo en otra variable de PHP.
como hacer que este valor que proviene de un select cambie de color cada que selecciono una palabra
<select name=«caracter» class=«form-select text-center» aria-label=«Default select example»>
<option selected>OBSERVACIONES</option>
<option value=«A TIEMPO»>A TIEMPO</option>
<option value=«PUNTUAL»>APUNTUAL</option>
<option value=«EN RETRASO»>EN RETRASO</option>
<option value=«FALTANTE»>FALTANTE</option>
</select>
y que al mostrarse en la tabla aparesca de un color el texto acorde al que se selecciono
<TD><?= $datos->caracter ?></TD>
Muchas gracias por esta guía, me sirvió muchísimo!
justo lo que buscaba, esta muy bueno gracias