Django传choices数据给JavaScript append下拉选项重复值问题

根因说明 #

• 每次追加选项前未清空下拉框原有内容，导致旧选项残留
• Django的choices是(存储值, 显示值)的二元元组结构，后端接口直接把整个元组返回给前端，遍历时会把元组内两个元素都当做独立项输出，因此每个名称重复出现两次

方案1（推荐：前后端配合修改） #

后端接口修改 #

调整/call_jquery_sektor/对应的视图函数，仅返回去重后的显示名称列表：

from django.http import JsonResponse
# 导入你定义的sektor元组
from .models import sektor

def call_jquery_sektor(request):
    # 提取每个选项的显示值，自动去重
    sektor_list = list({item[1] for item in sektor})
    return JsonResponse({'sektor': sektor_list})

前端JS修改 #

追加选项前先清空原有内容：

<script type="text/javascript">
    var endpoint = '/call_jquery_sektor/'
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data){
            const $select = $("#id_names")
            // 清空原有所有选项
            $select.empty()
            // 遍历追加新选项
            $(data.sektor).each(function(i, name) {
                $select.append(`<option value="${name}">${name}</option>`)
            })
        },
        error: function(error_data){
            console.log("error")
            console.log(error_data)
        }
    })
</script>

方案2（仅前端修改） #

如果不方便调整后端接口，可直接在前端完成数据清洗和去重：

<script type="text/javascript">
    var endpoint = '/call_jquery_sektor/'
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data){
            const $select = $("#id_names")
            $select.empty()
            const uniqueNames = new Set()
            $(data.sektor).each(function(i, item) {
                // 提取二元组的显示值
                const name = item[1]
                if (!uniqueNames.has(name)) {
                    uniqueNames.add(name)
                    $select.append(`<option value="${name}">${name}</option>`)
                }
            })
        },
        error: function(error_data){
            console.log("error")
            console.log(error_data)
        }
    })
</script>

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