¿Cómo agrego un <option> dentro de un <optgroup> de un <select> con JavaScript?

Lo que necesito es añadir un <option> mediante JavaScript, pero que este se encuentre dentro de un <optgroup> que ya había sido creado previamente.

Por ejemplo yo quiero agregar la opción Focus, pero que esta se encuentre dentro del <optgroup> de Ford, el cual ya había sido creado anteriormente.

Muchas gracias y saludos.

Respuestas

Si usas jQuery la solución es bastante sencilla:

var nombreGrupo = 'Ford';
var nombreOpcion = 'Focus';
var valorOpcion = 'ford_focus';
 
var grupo = $('<optgroup label="' + nombreGrupo + '">');
grupo.append('<option value="' + valorOpcion + '">' + nombreOpcion + '</option>');

@javiereguiluz

3 abril 2015, 9:22

Necesito hacerlo si o si mediante javascript, ya que es en un opener, no en la misma ventana.

@AgustinRoyo

3 abril 2015, 16:51

Si lo vas a hacer con JavaScript a mano, te recomiendo que añadas un atirbuto id a todos los elementos <optgroup>. Así el código te quedaría de la siguiente manera:

var grupo = document.getElementById('ford');
 
var opcion = document.createElement('option'); 
opcion.text = 'Focus';
opcion.value = 'ford-focus';
 
grupo.appendChild(opcion);

@javiereguiluz

3 abril 2015, 17:33