[SOLUCIONADO] Select dependiente hace varias veces la misma consulta

[fack007]

Buenas tardes, en una ventana modal tengo dos select, el cual el primero se carga al hacer clic en un botón que abre la ventana modal. Al seleccionar una opción en el primero, se carga el segundo.... hasta ahí todo está bien. después de llenar los campos y enviar el formulario de la ventana modal, ésta se cierra(esconde en realidad con el hide).

Entonces al querer agregar otra cosa y vuelva a hacer el mismo procedimiento de hacer clic para abrir la ventana modal que contiene el formulario, al seleccionar una opción del primer select, el segundo se carga pero, éste se carga dos veces, y así sucesivamente cada vez que quiera agregar un nuevo registro.

el código es el siguiente:

Código:

$("document").ready(function(){
	$('body').on('click','#btnAgregarOficina',function(){
		$(".modal-body #nom_Oficina").val("");			
		$("#selectAreaOficina").html("");
		$("#selectUbicacionOficina").html("");
		$("#selectUbicacionOficina").load("../server/selectUbicacionOficina.php" );
		$("#selectUbicacionOficina").change(function(){
			var id=$("#selectUbicacionOficina").val();
			$.get("../server/selectAreaOficina.php",{param_id:id})
			.done(function(data){
			$("#selectAreaOficina").html(data);
		        })
		})
	})
});

De antemano... Muchas gracias por su tiempo.

[man0l0]

Hola, faltó el html para entender un poco más lo que está pasando, pero según veo, creo que te sucede lo siguiente:

La primera vez que corres la ventana modal, te funciona todo bien, pero luego sigues trabajando con los mismo objetos, es decir, queda activado "el monitoreo" del id "#selectUbicacionOficina", por lo tanto después por cada cambio en ese ID se va a gatillar la función que carga el segundo select y eso causa la repetición.

El problema en sí está en que estás monitoreando la capa que contiene al select, y no el select en sí, intenta cambiar esta línea
$("#selectUbicacionOficina").change(function(){

por algo así

$("#selectUbicacionOficina select").eq(0).change(function(){


Saludos!

[fack007]

Perdón.... el código HTML de la ventana modal es el siguiente.

<div class='modal fade' id="agregarOficina" tabindex="-1" role="dialog" aria-labelledby="agregarOficina" data-keyboard="false" data-backdrop="static" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="AgregarOficinaTitle">Agregar Oficina</h4>
</div>
<div class="modal-body" >
<form method="POST" name="formAgregarOficina" id="formAgregarOficina">

<div class="form-group">
<label for="nom_Oficina">Nombre Oficina</label>
<input id="nom_Oficina" class="form-control" name="nom_Oficina" type="text" placeholder="Nombre de Oficina" />
</div>

<div class="form-group">
<label for="selectUbicacionOficina">Seleccione Ubicación</label>
<select name='selectUbicacionOficina' id='selectUbicacionOficina'>
</select>
</div>

<div class="form-group">
<label for="selectAreaOficina">Seleccione Área</label>
<select name='selectAreaOficina' id='selectAreaOficina'>
</select>
</div>

<button id="btnGuardarOficina" type="submit" class="btn btn-success">Guardar</button>
<br><br><div id="msjAgreOficina"></div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="GuardarAreaCerrar" class="btn btn-warning" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>

... Hice lo que me dijiste y no funciono creo que debido a $("#selectUbicacionOficina select").eq(0).change(function....
luego quite eso de select y deje lo de eq(0) y siguió funcionando como lo tenía... de antemano gracias!

[man0l0]

Ya me queda más claro, intenta lo siguiente:
en vez de:
$("#selectUbicacionOficina").change(...
Usa
$("#selectUbicacionOficina").unbind('change').chan ge(


Slds!