1

Teniendo un select como este:

<select id="main">
   <optgroup label="Coches">
      <option value="Mustang">Mustang</option>
      <option value="Ford">Ford</option>
   </optgroup>
   <optgroup label="Motos">
      <option value="Scooter">Scooter</option>
      <option value="Extra">Extra</option>
   </optgroup>
</select>

estoy buscando la forma de obtener el value de la opción seleccionada por el usuario a través de JavaScript, tras muchas pruebas y búsqueda de información no doy con la acertada. Por lo que sé, hay que tratar al optgroup como un objeto, y utilizando un índice se puede obtener la opción seleccionada, no?

Un saludo y gracias

4
  • En la propia etiqueta HTML le estás indicando el value independientemente del valor que recoja del usuario tu siempre pondrías value="Mustang"
    – rencinas
    Commented el 20 mar. 2018 a las 12:09
  • A la hora de obtener el valor, este se recoje de la opción seleccionada por el usuario, si este hace click sobre Extra, se obtendrá "Extra",como indica su correspondiente value, igual que si fuese Mustang. Commented el 20 mar. 2018 a las 12:12
  • Hice una prueba de tu código con el clásico selectedIndex, y me retornó el valor esperado: obj.options[obj.selectedIndex].value ¿Cuáles formas has intentado que no te han funcionado como esperabas?
    – quinqui
    Commented el 20 mar. 2018 a las 12:26
  • Gracias a todos. Por lo visto estaba utilizando los índices pero no buscaba el valor dentro del array correctamente.. Commented el 20 mar. 2018 a las 12:36

2 respuestas 2

3

Sí lo que deseas es el valor de la opción seleccionada por JavasScript es así:

var select = document.getElementById('main');
select.addEventListener('change',
function(){
var selectedOption = this.options[select.selectedIndex];
console.log(selectedOption.value + ': ' + selectedOption.text);
});

Y por JQuery:

 $(document).ready(function(){
    $('#main').change(function () {            
       $("#main option:selected").each(function () {
            elegido=$(this).val();                                  
       });         
    });
});   

o

$('#main').val()
3
  • la mejor opcion es jquery te ahorras codigo como muestra el comentario de arriba: $('#main').val() Commented el 20 mar. 2018 a las 12:31
  • Esta respuesta me ha venido genial, con dos opciones por escojer, gracias, me funciona! Commented el 20 mar. 2018 a las 12:38
  • Exacto, una opción para obtenerlo cuando lo seleccionas y una poción para después de seleccionado. Commented el 20 mar. 2018 a las 12:39
0

Con JQuery puedes hacerlo de esta manera:

EDIT

Agregado código para obtener el label del optgroup también.

$(document).ready(function(){
  $("#main").on("change",function(){
    console.log($(this).val());
    console.log($(this.options[this.selectedIndex]).closest('optgroup').attr('label'));
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="main">
  <option value="">Seleccione una opción</option>
  <optgroup label="Coches">
   <option value="Mustang">Mustang</option>
   <option value="Ford">Ford</option>
  </optgroup>
  <optgroup label="Motos">
   <option value="Scooter">Scooter</option>
   <option value="Extra">Extra</option>
  </optgroup>
</select>

1
  • Se agradece la fácil explicación y directa ejecución de la respuesta en la web :D Commented el 20 mar. 2018 a las 12:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.