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.
Muchas gracias, funciona bien!
Excelente, muchas gracias , lo aplique en mi web
genial muy genial
Excelente muy efectivo… gracias mil
Excelente aporte…
Muchas Gracias, me ayudaste con el proyecto que estoy trabajando.
muchas gracias…..
gracias amigo, me funcinó, muy buena explicación
Hola, muy bueno!
Excelente, justo lo que necesitaba. Gracias
estoy haciendo una pagina web con nodejs y el framework xpress como haría para obtener el valor en mi archivo.js de un select que coloque en un archivo.jade
no me funciona esto :/
Realmente funciona! excelente. Tengo una pregunta: Cómo se podria obtener el texto y value de un select multiple con Javascript? o JQuery?.
Hola, tengo un dropdown que toma valor mediante una funcion javascript. Si cambio la seleccion del valor en la tabla entonces el dropdown cambia su seleccion, hasta aqui todo bien. El problema está, por ejemplo, tengo una lista x1, x2, x3, primero seleccionée X2, luego x3 y vuelvo a seleccionar X2, entonces ya el dropdown list no me muestra el valor. No tengo idea de que pueda ser, te agradeceria mucho si me dieras algun aporte. Aqui te dejo el codigo.
@Html.DropDownList(«ArticuloICId», ViewData[«ArticuloICIdd»] as SelectList, htmlAttributes: new { @class = «form-control col-md-7 col-xs-12», @id = «ArticuloICIdd», @disabled = true })
$(‘#articulo_seleccionado’).on(‘click’, function () {
var cadena1 = $(‘input:radio[name=articulo_marcado]:checked’).val();
var res = cadena1.substring(16, cadena1.length-1);
alert(«valor del seleccionado anterior: » + $(«#ArticuloICIdd option:selected»).text());
//pongo al elemento seleccionado antes sin seleccion
$(«#ArticuloICIdd option[value=» + $(«#ArticuloICIdd option:selected»).val() + «]»).attr(«selected», false);
//marco la seleccion actual
$(«#ArticuloICIdd option[value=» + res + «]»).attr(«selected», true);
alert(«seleccion actual: » + $(«#ArticuloICIdd option[value=» + res + «]»).val()),
});
Hola muy buen aporte, pero les escribo para ver si me pueden ayudar con un Combobox-select-dinamicos y octerner el val tex, lo he intentado y me sigue saliendo el valor del ID y lo que quiero es se me registre en base de datos es text.
Jesus te estoy tratando de enviar los codigos pero me recha me sale este mensaje.
Su mensaje no se entregó porque el proveedor de correo electrónico del destinatario lo rechazó.
Lo envie los codigos por Dropbox porque el correo no me lo permitio
Estimado amigo interesante el aporte y la ayuda. Pero disculpa mi ignorancia. Si el valor del select no lo quiero en un ALERT sino que en una variable que cuando le diga por ejemplo ECHO $value; imprima 12 según tu ejemplo que más tendria que agregar y en donde. De antemano gracias por tu respuesta
SOLO capturas el texto y si lo quieres hacer por id
gracias por el script me salvo la vida
hola gracias por la info, muy buena!.. y como hago para cambiar ese texto por otro? gracias
Excelnte informacion, gracias, hay sigues publicando mas detalles..
Hola… Corrí el ejemplo y funciona bien…!!!
Pero quisiera saber las dos variables cod y selected de javascript, como las capturo en PHP, he buscado y no me funciona el código que he encontrado y además muy confuso.
Gracias por tu ayuda y me salvaría muchooooo!!!!
Muchas gracias! estuve buscando y ninguna de las opciones que encontré me sirvió, hasta que encontré esta, gracias por el aporte.
Administrador me apoyas obtener el ID
Combobox-select-dinamicos y obtener el val text o Id
document.getElementById(“ID DE TU CONTROL”)
hola que tal, una pregunta, tengo 3 combobox que el ultimo me permite seleccionar una delegacion, esa delegacion tiene un id, me gustaria q ese id se imprimiera en un input deshabilitado como puedo hacerlo?
Lo que tu haces muestra un mensaje pero si lo quiero utilizar el valor en la vista como seria?
Funciona!! 🙂
Espectacular!!
Genial, muchas gracias