Django REST+AJAX+jQuery更新模态框如何显示外键名称而非ID并支持下拉选择

问题根源说明 #

之前你将property字段改为返回字符串后，编辑表单对应的输入框是type="number"类型，字符串无法填入数值型输入框导致为空，且提交字符串也不符合外键存储规范。下面是完整可落地的解决方案：

后端改造 #

1. 调整序列化器 #

替换现有RentalUnitsSerializers，无需自定义to_representation方法，利用DRF内置字段实现读写分离：

class RentalUnitsSerializers(serializers.ModelSerializer):
    # 读取时自动调用Properties模型的__str__方法，返回物业名称
    property = serializers.StringRelatedField(read_only=True)
    # 读写都暴露外键ID字段，用于提交数据
    property_id = serializers.IntegerField()

    class Meta:
        model = RentalUnits
        fields = ('id', 'unit_number', 'property', 'property_id', 'no_of_bedrooms', 'no_of_bathrooms', 'rent_per_month', 'status',)

改造后GET接口会同时返回property（物业名称，用于展示）和property_id（外键ID，用于提交），POST/PUT请求接收property_id参数赋值外键，数据库仍然存储ID，完全符合开发规范。

2. 新增物业列表接口 #

新增返回所有物业数据的接口，用于前端填充下拉选项，示例视图：

from rest_framework import viewsets
class PropertiesViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Properties.objects.all()
    serializer_class = PropertiesSerializers

路由配置对应路径比如/api/properties/即可。

前端改造 #

1. 修改编辑表单 #

把原来的只读property输入框替换为下拉选择框：

<div class="mb-3">
    <label>Associated Property</label>
    <select class="form-select" name="property_id" id="u-property" required>
    </select>
</div>

2. 调整JS逻辑 #

（1）页面加载时填充物业下拉选项

// 页面加载完成后拉取所有物业列表，生成下拉选项
$(function(){
    $.ajax({
        url: "http://127.0.0.1:8000/api/properties/",
        method: "GET",
        success: function(propertyList){
            let options = propertyList.map(prop => `<option value="${prop.id}">${prop.property_name}</option>`);
            $("#u-property").html(options.join(''));
        }
    })
})

（2）修改编辑模态框赋值逻辑

把原来给property输入框赋值的代码修改为给下拉框设置选中值：

// 编辑接口的success回调里修改对应代码
// 原代码：$('input[name="property"]').val(result.property);
// 替换为：
$("#u-property").val(result.property_id);

3. 提交逻辑无需修改 #

表单序列化时会自动把下拉框选中的property_id提交到后端，原有保存编辑的逻辑不需要改动。

改造后数据表和编辑框都显示物业名称，提交保存时传的是外键ID，数据库存储完全符合规范，同时支持切换物业的需求。

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