Insertar un select nuevo para un valor de otro select

[el_pol]

Hola, tengo una página en php con un formulario que tiene varios campos. Uno de ellos es un select. Cuando en ese select el valor es "q&a" (seleccionada por defecto) no debe cambiar nada, pero si se cambia al valor "bs" se deben añadir un par de selects nuevos. El caso es que llevo todo el día dándole vueltas, buscando por webs y tutoriales y no conseguí que llegue a aparecer el nuevo select nunca.

Pongo el código simplificado omitiendo un montón de campos que considero innecesarios.

Código:

<form action="<?php echo $vars['url'] . $action; ?>" enctype="multipart/form-data" method="post" name="form">
    <p>
		<label>
			<select name="app" onChange="addSelectors()">
				<option <?php echo $qa; ?> value="q&a"><?php echo elgg_echo('questions:form:app:q&a'); ?></option>
				<option <?php echo $brainstorming; ?> value="bs"><?php echo elgg_echo('questions:form:app:brainstorming'); ?></option>
			</select>
		</label>
	</p>
	

</form>

Los elgg_echo lo único que hacen es importar una cadena de texto de un archivo de idiomas en Elgg por si alguien no lo entiende.

Mi función javascript provisional (con cosas copiadas de ejemplos que vi) es:

Código:

<script language="javascript">
function addSelectors(){
	if (document.form.app[document.form.app.selectedIndex].value == "bs") {
		js1 = document.form.CreateElement('select');
		js1.setAttribute('id','idsel1');
		js1.options[0] = new Option('aaaa',0);
		js1.options[1] = new Option('bbbbb',1);
		document.form.appendChild(js1);
	}
}

</script>

Alguna idea de qué puede fallar?Leí algo acerca de hacer el appendChild en un elemento de tipo div. También hice alguna prueba pero no solucioné nada.

[maycolalvarez]

new Option() ¿seguro que esto existe?, no seria crear otro elemento tipo option: createElement('option'), además es mucho más simple por innerHTML, crea un div en donde se supone que debe crearse el nuevo select y:

document.getElementById('div_para_el_select').inne rHTML='<select><option value="valor">option1</option></select>';//lo único es controlar la creación de los option concatenando

[Adler]

Hola

¿Sabes el número de option y los valores de las mismas? Si es así, creas los select, los ocultas con hidden y cuando cambie el primer select muestras uno u otro arreglo a la opción seleccionada

Por otro lado el problema que tienes está aquí addSelectors() pasale un argumentos this.options[this.selectedIndex].value

Suerte

[el_pol]

Muchas gracias a ambos. Con la primera solución, la del innerHTML, ya conseguí un resultado aceptable, pero me pareció más elegante lo del visibility:hidden y lo investigué un poco. La verdad que es una buena solución pero mantiene el hueco en blanco cuando no se muestra lo que deja una imagen un tanto pobre. Buscando un poco más encontré una solución perfecta -> En lugar del visibility:hidden o visibility:visible utilizar display:none o display:block. Con esta variante cuando no se muestra, no se mantiene el espacio en blanco.

Un saludo a todos.