Tengo un formulario que contiene un select. Tengo también un script javascript que detecta si selecciono una opción diferente a la que muestra por defecto el select. Hasta aquí todo bien.
Ahora, debajo de ese select tengo un botón que añade otro select exactamente igual debajo del primero (y así sucesivamente). Y aquí es donde viene el problema, el código javascript parece que "pasa" de escuchar a estos nuevos select creados dinámicamente.. Solo escucha los cambios en el primer select creado directamente en el HTML. Os enseño el código a ver si podeis ayudarme. Gracias!!
Codigo HTML
Código:
<div class="container-fluid">
<section class="row main">
<article class="col-xs-12">
<form class="form-inline" action="asistente_enviar.php" method="post">
<div id="cajonprincipal">
<div id="cajon1" class="form-group">
<input id="pregunta1" class="form-control" type="text" placeholder="¿Vas a?">
<select id="select" class="form-control" name="select1" >
<option value="0" selected>Si/No</option>
<option value="2">2 opciones a elegir</option>
<option value="3">3 opciones a elegir</option>
</select>
</div>
</div>
<button class="form-control" type="button" id="botonmas" onclick="addFields()">Añadir</button>
<input class="form-control btn btn-primary" type="submit" value="Terminar y rellenar"/>
</form>
</article>
</section>
</div>
Javascript para detectar cuando selecciono otra opcion
Código:
$('select#select').on('change',function(){
var valor = $(this).val();
var idaux = $(this).parent().attr("id");
//alert(idaux);
var container = document.getElementById();
for(i=0;i<valor;i++){
var input = document.createElement("input");
input.id = "Opcion"+(i+1);
input.className = "form-control";
input.type = "text";
input.placeholder = "Editar opcion"+(i+1);
container.appendChild(input);
}
});
Javascript para añadir input y select desde el boton añadir
Código:
n=1;
function addFields(){
n++;
var cajon = document.createElement("div");
cajon.id = "cajon"+n;
cajon.className = "form-group";
cajonprincipal.appendChild(cajon);
var input = document.createElement("input");
input.id = "pregunta"+n;
input.className = "form-control";
input.type = "text";
input.placeholder = "Editar pregunta "+n;
cajon.appendChild(input);
var select = document.createElement("select");
select.id="select";
select.className = "form-control";
select.name = "select";
cajon.appendChild(select);
var op1 = document.createElement("option");
op1.value = ("0");
op1.text = ("Si/No");
select.appendChild(op1);
var op2 = document.createElement("option");
op2.value = ("2");
op2.text = ("2 opciones a elegir");
op2.selected = "selected";
select.appendChild(op2);
var op3 = document.createElement("option");
op3.value = ("3");
op3.text = ("3 opciones a elegir");
select.appendChild(op3);
}