problemas al hacer un Filtro multiple de Departamento Provincia Distrito

[Copia]

Hola comunidad, tengo un problema al hacer funcionar un filtro múltiple que son combos(Select) donde al Seleccionar un Departamento, con ajax se cargue Las provincias que tiene dicho departamento, de igual forma con los departamentos que una vez seleccionados me muestre los distritos.

Esta es la porcion de html para los combos:

Código HTML:

<div class="select3">
        <label for="hostname">Departamento</label>
        <select id="origenDepartamento" class="select3">
            <option value="n"></option>
          <?php
                foreach($departamento as $dp){
                    echo "<option class='origenDepartamento' value='"
                         .$dp->idDepartamento."'>"
                         .$dp->Nombre."</option>";
                }
          ?>
        </select>
    </div>
 
    <div id="divProvincia" class="select3">
        <label for="hostname">Provincia</label>
        <select id="origenProvincia"  class="select3">
            <option value="n"></option>          
        </select>
    </div>
 
    <div id="divDistrito" class="select3">
        <label for="hostname">Distrito</label>
        <select id="origenDistrito"  class="select3">
            <option value="n"></option>
        </select>
    </div>
 

A continuacion el código en javascript con jquery, lo que hace es lanzar la funcion procesar(); si hay un cambio en el select departamento o provincia. Luego envia por post al servidor unos datos a procesar, una vez hecho esto lo devuelve, el valor devuelto tiene formato JSON:

Código Javascript:

$(document).ready(function(){ 
    $('#origenDepartamento').change(function()
    {
        procesar($(this).val(),"Provincia","idDepartamento");
    });
});
$(document).ready(function(){
    $('#origenProvincia').change(function()
    {
        alert("a");
        procesar($(this).val(),"Distrito","idProvincia");
    });
});
 
 
function procesar(idSelect,operar,nameId){    
    $.ajax(
    {
        type: 'POST',
        url:'http://localhost/asd/procesarCampos/',
        data: 'id='+idSelect+'&operar='+operar+'&nameId='+nameId,
        success: function(resp){            
            var oResp = eval("("+resp+")");
            var nselect = "<div id='div"+operar+"' class='select3'>"+
            "<label for='hostname'>"+operar+"</label>"+
            "<select id='"+operar+"' class='select3'><option value='n'></option>";
            id = "oResp[i].id"+operar;
            for(i=0; i < oResp.length;i++){
                nselect +="<option value='"+id+"'>"+oResp[i].nombre+"</option>";
            }
            nselect +="</select></div>";
 
            $('div[id="div'+operar+'"]').html(nselect);
 
        }
    }
    );
}
 

Bien el código me funciona correctamente cuando selecciono un departamento, por ejemplo Lima. carga las provincias que esta tiene, pero el problema recide que al seleccionar una provincia no me muestra sus distritos.

Yo pienso porque el codigo html en un inicio para provincia y distrito los select estan vacíos y a pesar de que se carguen las provincias tras la selección de un departamento el DOM no se modifica puesto que no me reconoce un cambio en el select provincias.

Tengo un atasco en esto y no se me ocuerre ahora nada para resolverlo ¿que puedo hacer?

[Copia]

hola, encontre mi problema.
El problema que tengo esta en este for:

Código Javascript:

for(i=0; i < oResp.length;i++){
                nselect +="<option value='"+id+"'>"+oResp[i].nombre+"</option>";
            }
 

no se esta escribiendo en el value de option lo que quiero, por ejempo un numero, sino una cadena de texto. porque esta mal parseado, este id se forma asi:

id = "oResp[i].id"+operar;

operar, toma un nombre por ejemplo Departamento, y en ese id lo que se guarda es oResp[i].idDepartamento, pero en cadena de texto, y no quiero que haga eso, sino que se ejecute porque en el arrar existe una fila con nombre idDepartamento. Otras veces operar seria por ejemplo Provincia, entonces id seria oResp[i].idProvincia. como hago para que se ejecute??

[Copia]

hola, nuevamente.

Amigos tengo un problema a resolver, ya las funciones andan bien.

El problema es que no se como hacer para que javascript reconosca un cambio en el segundo select.

Código php:

<div class="select3">
        <label for="hostname">Departamento</label>
        <select id="origenDepartamento" class="select3">
            <option value="n"></option>
          <?php
               foreach($departamento as $dp){
                   echo "<option class='origenDepartamento' value='"
                        .$dp->idDepartamento."'>"
                         .$dp->Nombre."</option>";
                }
          ?>
        </select>
    </div>
 
    <div id="divProvincia" class="select3">
        <label for="hostname">Provincia</label>
        <select id="origenProvincia"  class="select3">
            <option value="n"></option>          
        </select>
    </div>
 

Cuando hay un cambio en el select con id = origenDepartamento, se procesan los datos y se reescribe el select con id=origenProvincia y se llenan con los datos correspondientes, pero el js no lo identifia: este es ahora el js:

Código Javascript:

$(document).ready(function(){ 
    $('#origenDepartamento').change(function()
    {
       procesar($(this).val(),"Provincia");
    });
     $('select[id="origenProvincia"]').change(function()
    {
        alert('a'); //no lo imprime.
        //procesar($(this).val(),"Distrito","idProvincia");
    });
});
 

Que estoy haciendo mal??

[Copia]

algo que me falto comentar es que cuando hago por ejemplo:

Código Javascript:

$(document).ready(function(){
        $('#origenDepartamento').change(function()
        {
           procesar($(this).val(),"Provincia");
        });
         $('#divProvincia').change(function()
        {
            alert('a'); //aqui si lo imprime
            //procesar($(this).val(),"Distrito","idProvincia");
        });
    });
 

Se imprime a.. porque???