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.
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
Hola Carlos, gracias por tu comentario.
Si lo que quieres es enviar el dato capturado a un elemento HTML, entonces, puedes hacer uso del siguiente código:
En caso de Inputs:
document.getElementById("ID_DE_TU_ELEMENTO_HTML").value = selected;En caso de elementos HTML de tipo SPAM, LABEL, DIV, ETC:
document.getElementById("ID_DE_TU_ELEMENTO_HTML").innerHTML = selected;hola una pregunta, con este codigo me funciona de maravilla , pero como puede hacer que en el elemento html me registre o me muestra todas las respuestas, es decir en este ejemplo hay dos opciones se elige una y esta se muestras en un div, pero al elegir una nueva opcion desaparece la anterior y lo que busco es que me queden todas las seleccionadas
Hola Julian, un gusto saludarte.
Debes manipular la opción DOOM correspondiente a tu elemento HTML. Imagino estas usando el JQUERY, entoncs puedes usar append para agregar mas de un valor, te recomiendo busques documentación al respecto.
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.
Hola, se me ocurre que a cada
Entonces usando jquery puedes dejar algo como esto:
$(«label.r1»).text()
$(«label.r2»).text()
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 Kenny, no estoy familiarizado con el desarrollo en Java Servlet; pero déjame investigar un poco y si encuentro algo te lo enviare directamente a tu correo.
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();
Primero debes encontrar el select dentro del TD y una vez lo hagas puedes obtener el valor de la lista como en el post.
Hola como se aplicaría para un select?
Hola, perdona no entiendo tu preunta, el ejemplo se aplica 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 Luca, gracias por escribir.
En la publicación podrás ver la linea [var selected = combo.options[combo.selectedIndex].text], lo que puedes hacer es enviar la variable a un input de tipo Hidden y posteriormente en u código PHP enviar ese valor a tu base de datos.
Si estas usando JQUERY AJAX entonces simplemente mandas la variable como un parametro al enviar la solicitud a tu webservice.
Muchas gracias por su respuesta! Un saludo.
y eso en codigo como seria?
Disculpa, si formulas un poco mejor tu pregunta.
Hola. Tengo un select lleno con algunos datos, y necesito seleccionar uno en particular desde javascript. ¿cómo se haría eso?
Solo necesitas identificar tu select con un ID para hacer referencia desde tu código Javascript
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 😀
Despues del nombre de la función siempre debes agregar los parentesis. function agregarTexto() {Tu código}
Ahora, no me queda claro si lo que quieres es agregar un texto al combobox (drop down list) o por tu redaccón, pasar el texto del item seleccionado en el combobox al FieldText, si esto último, quedaria algo asi:
function agregarTexto()
{
var combo = document.getElementById(«TU_COMBO»);
var text_seleccionado = combo.options[combo.selectedIndex].text;
//Si usas JQUERY
$(«#ID_DE_TU_FIELDBOX»).val(text_seleccionado);
}
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.
¿Puedes colocar tu código para ver como haces el guardado?
Buenas, quisiera saber como hacer un multi selector sin necesidad de librerías.
Alguien me podría ayudar?
Tendrias que hacer mucho código para lograr eso, tanto de HTML, CSS y JS, te recomendaria mejor uses una libreria Jquery con dicha implementación o uses directamente un control de seleccion multiple.
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, hay varias opciones que puedes utilizar con JQUERY:
$(‘#ID-SELECT’).prepend(««);
O quizas instanciando
let $option = $(‘‘, {
text: ‘Josh_reder’,
value: 1,
});
$(‘#ID-SELECT’).prepend($option);
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»
})
El ejemplo está con Javascript, basicamente el uso es el mismo incluso en PHP, lo unico que tienes que tomar en cuenta es como llamar a tu control objetivo.
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.
Hola Gustavo perdona por contestar tarde, tuve un accidente y estuve en el hospital.
Referente a tu consulta, recuerda que el ejemplo es Javascript, si quieres enviar tu variable a PHP tendría que valorar como estas manejando la transferencia de información.
Si por ejemplo estas usando JQUERY con AJAX, entonces es fácil, porque la misma variable puede ser usada, pero si estas usando un método POST directamente en el formulario te aconsejo almacenes la variable en un input Hiddent para que puedas usarlo al momento de realizar el Postback