Desplegable en cascada de Python/Jquery/Ajax

Estoy tratando de configurar un menú desplegable en cascada con python/jquery/ajax.

El primer menú desplegable se configura manualmente en el código html.

Los menús desplegables segundo/tercero dependen de las selecciones anteriores.

Cuando selecciono el primer menú desplegable, puedo completar el segundo menú desplegable con los datos a través de la llamada ajax. El problema es con el segundo -. 3er menú desplegable.

La llamada no proviene del cliente en absoluto. el genrate del código html parece ser correcto ya que firebug da el resultado correcto. Estoy pensando que el cliente no se está actualizando para permitir que el nuevo contenido dinámico se use con el jquery que ya está cargado.

No he agregado mi código python en cuanto al segundo -> menú desplegable, la llamada ni siquiera deja al cliente, así que no creo que este sea el problema.

Sin embargo, lo agregará si es necesario.

He buscado y buscado ejemplos y he visto algunos resultados similares pero nada fructífero

Cualquier ayuda apreciada.


jquery:

$(document).ready(function(){

        $(".dynamic-select").change(function(){
            var url_params = '?' + $(this).attr('name') + '=' + $(this).val() + '&sid=' + $(this).attr('id');
            $.getJSON('ajax' + url_params,function(data) {

                $("#"+ data.element_id).replaceWith(data.data);




    });

        });
    });

fragmento html

            <select class="dynamic-select" id="test1" name="test1">
                <option value="#">Select</option>
                <option value="EU">Europe</option>
                <option value="NA">North America</option>
                <option value="AS">Asia</option>
            </select>


            <select class="dynamic-select" id="test2" name="test2">
                <option value="#">Select First Dropdown</option>
            </select>

            <select class="dynamic-select" id="test3" name="test3">
                <option value="#">Select Second Dropdown</option>
            </select>

salida html de firebug después de seleccionar UE en el primer menú desplegable

<select id="test1" class="dynamic-select" name="test1">
<option value="#">Select</option>
<option value="EU">Europe</option>
<option value="NA">North America</option>
<option value="AS">Asia</option>
</select>
<select id="test2" class="dynamic-select" name="test2">
<option value="#">Select EU</option>
<option value="EU_EQ_JA">EU_EQ_JA</option>
<option value="EU_CR_AR">EU_CR_AR</option>
<option value="EU_EQ_MC">EU_EQ_MC</option>
<option value="EU_EQ_CS">EU_EQ_CS</option>
<option value="EU_EQ_CR">EU_EQ_CR</option>
<option value="EU_CR_GS">EU_CR_GS</option>
</select>
<select id="test3" class="dynamic-select" name="test3">
<option value="#">Select Second Dropdown</option>
</select>

preguntado el 27 de julio de 12 a las 16:07

1 Respuestas

Así que creo que tu problema es con el $(".dynamic-select").change(). Eso, al igual que el enlace y un par de otros desencadenantes de eventos en JQuery, debe configurarse nuevamente a medida que se agrega cada elemento.

Si utiliza

$("body").on('change','.dynamic-select',function(e){//some stuff here});

en su lugar, debería funcionar para todos los elementos insertados en el DOM.

Respondido 29 Jul 12, 09:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.