Obtener valores y texto de un select con Javascript
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!
😀 muchas gracias a ti por comentar. Y puedes enviar sugerencias sobre temas por este medio o por mensaje privado. De igual forma te agradeceria mucho y me motivarias a seguir realizando publicaciones si compartieras y comentaras con tus conocidos.
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 a ti Gerardo, muy pronto tendremos tutoriales en video en nuestro canal de YouTube. Estaré mandando notificaciones por correo, esperamos su apoyo con algunas visitas.
gracias amigo, me funcinó, muy buena explicación
No hay porque, estamos para ayudar. Saludos.
Hola, muy bueno!
Hola Patricial, que bueno que te sirvio.
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
Todo Framework lo que hace es transformar controles nativos a controles HTML, si la función no te responde es posible a que el nombre del control sea diferente al que tu declaras, esto me refiero a cuando la página se procesa y se muestra en el navegador. Presiona F12 para ver el código fuente, revisa el nombre de cliente de tu control y haz la prueba.
no me funciona esto :/
Puedes colocar tu código para revisar donde esta el problema.
Realmente funciona! excelente. Tengo una pregunta: Cómo se podria obtener el texto y value de un select multiple con Javascript? o JQuery?.
Hola Carmen, para contestar tu pregunta necesitaria ver el código que usas para el select multiple.
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 Laurien, acabo de enviarte un correo para que mandes tu código y poder ayudarte.
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.
Hola Francis, acabo de enviarte un correo para que mandes tu código y poder ayudarte.
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ó.
Hola Francis, comprime todo el código en un .rar o un .zip, los correos por defecto no permiten ciertos archivos, al comprimirlo te dejara. Verifica que el peso del archivo no super elos 10MB.
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
Hola David, tu pregunta tiene que ver más con PHP que con Javascript, no obstante, hay dos formas sencillas de obtener el valor de un control desde PHP pero debes hacerlo mediante los métodos POST o GET de PHP, en este caso sería:
$_POST[“nombre de tu control”] o $_GET[“nombre de tu control”]
Espero haberte dado una pequeña idea de lo que necesitas hacer, si tienes más dudas, házmela saber.
SOLO capturas el texto y si lo quieres hacer por id
Hola Moises, el ejemplo te muestra como capturar el valor del select por ID, para eso usamos la sentencia document.getElementById(«ID DE TU CONTROL»)
gracias por el script me salvo la vida
No hay porque Frans
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!!!!
Hola Cristin, el ejemplo corre sobre el cliente, es decir con Javascript, lo que podrias hacer es enviar las variables a un Hidden Input y posteriormente pasar el control a PHP.
Muchas gracias! estuve buscando y ninguna de las opciones que encontré me sirvió, hasta que encontré esta, gracias por el aporte.
Me alegra que funcionara esto para ti, si tienes alguna pregunta adicional no dudes en hacerla.
Un saludo.
Administrador me apoyas obtener el ID
Combobox-select-dinamicos y obtener el val text o Id
document.getElementById(“ID DE TU CONTROL”)
Hoa estimado, ¿cual es tu pregunta en si? Necesito ver tu código para tener idea de cual es el error.
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?
Hola Ivan, gracias por escribir.
Lo que necesitas hacer es sencillo, simplemente pasa el valor del select utilizando jquery de la siguiente forma:
$(“#El_ID_DE_TU_INPUT”).val(selected);
Si lo quieres hacer sin usar jquery, seria:
document.getElementById(“El_ID_DE_TU_INPUT”).value = selected;
Lo que tu haces muestra un mensaje pero si lo quiero utilizar el valor en la vista como seria?
Hola Nicole, gracias por escribir.
Lo que necesitas hacer es sencillo, simplemente pasa el valor del select utilizando jquery de la siguiente forma:
$(«#El_ID_DE_TU_INPUT»).val(selected);
Si lo quieres hacer sin usar jquery, seria:
document.getElementById(«El_ID_DE_TU_INPUT»).value = selected;
Funciona!! 🙂
Espectacular!!
Genial, muchas gracias