Django使用AJAX加载级联下拉列表时如何指定替换HTML特定部分

当然可以显式指定需要替换的div部分，只需要对返回的AJAX响应内容做简单的筛选处理即可，具体实现方案如下：

1. 调整返回模板的结构 #

你可以把所有级联字段对应的选项内容都放在同一个模板文件中，每个字段的选项用带唯一id的div包裹，示例如下：

<!-- 门店下拉选项容器 -->
<div id="store_options">
    <option value="">---------</option>
    {% for store in stores %}
    <option value="{{ store.id }}">{{ store.StoreNM }}</option>
    {% endfor %}
</div>
<!-- 后续可新增其他级联字段的选项容器，比如所属商品 -->
<div id="goods_options">
    <option value="">---------</option>
    {% for good in goods %}
    <option value="{{ good.id }}">{{ good.GoodsName }}</option>
    {% endfor %}
</div>

2. 修改AJAX成功回调逻辑 #

你当前拿到的AJAX响应是字符串类型的HTML内容，先把它转为jQuery可操作的DOM对象，再按id筛选需要的部分替换到对应下拉框即可：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_ReadingAreaNo").change(function () {
        var url = $("#personForm").attr("data-cities-url");   
        var ReadingAreaNo = $(this).val();      
        $.ajax({                       
            url: url,                    
            data: {
                'ReadingArea': ReadingAreaNo       
            },
            success: function (data) {   
                // 将返回的HTML字符串转为jQuery DOM对象
                const respDom = $(data);
                // 筛选门店选项部分，替换门店下拉框
                $("#id_StoreNO").html(respDom.find("#store_options").html());
                // 如果需要同时替换其他下拉框，新增对应筛选逻辑即可
                // $("#id_Goods").html(respDom.find("#goods_options").html());
            }
        });
    });
</script>

注意：如果你模板里的选项div是顶级元素（没有外层父标签包裹），需要把find换成filter方法，否则会出现找不到元素的问题：

$("#id_StoreNO").html(respDom.filter("#store_options").html());

3. 调整视图函数（可选） #

如果你需要在同一个请求里返回多个级联字段的数据集，在视图中把所有需要的查询集都传入模板即可：

def load_cascade_options(request):
    ReadingAreaNo_id = request.GET.get('ReadingArea')
    # 查询门店数据
    stores = StoreMaster.objects.filter(ReadingAreaNo_id=ReadingAreaNo_id).order_by('StoreNO')
    # 查询对应商品数据
    goods = GoodsMaster.objects.filter(ReadingAreaNo_id=ReadingAreaNo_id).order_by('GoodsNO')
    # 所有数据集同步传入模板
    return render(request, 'rateshare/store_dropdown_list_options.html', {'stores': stores, 'goods': goods})

• 所有选项容器的id必须全局唯一，不要和页面已有元素的id重复
• 路由配置可保持原逻辑不变，也可以根据实际功能修改为更匹配的命名

内容的提问来源于stack exchange，提问作者SANGEETH SUBRAMONIAM