1

我正在尝试使用 python/jquery/ajax 设置级联下拉列表。

第一个下拉菜单是在 html 代码中手动设置的。

第二个/第三个下拉菜单取决于之前的选择。

当我选择第一个下拉列表时，我可以通过 ajax 调用用数据填充第二个下拉列表。问题在于第二个-。第三个下拉菜单。

呼叫根本不是来自客户端。html 代码生成似乎是正确的，因为 firebug 给出了正确的输出。我在想的是客户端没有被刷新以使新的动态内容能够与已经加载的 jquery 一起使用。

我没有添加我的 python 代码，因为第二个 -> 下拉调用甚至没有离开客户端，所以我认为这不是问题。

如果需要，会添加它。

我一直在寻找示例，并看到了一些类似的结果，但没有任何成果

任何帮助表示赞赏。

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);




    });

        });
    });

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>

从第一个下拉列表中选择 EU 后的 firebug html 输出

<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>
4

1 回答 1

0

所以我相信你的问题在于$(".dynamic-select").change(). 这就像 JQuery 中的 bind 和其他几个事件触发器一样，必须在添加每个元素时再次设置。

如果你使用

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

相反，它应该适用于插入 DOM 的所有元素。

于 2012-07-28T18:12:03.023 回答