Django多选Select字段仅保存单个值问题：如何将多选城市保存为列表

你遇到的问题是因为Django默认对CharField处理多选值时，只会取最后一个提交的值，而多选的<select>会提交一个值列表。要实现保存城市列表的需求，我们可以通过以下几个步骤来修改：

1. 修改模型字段以支持列表存储 #

首先，我们需要把city字段改成能存储列表的类型。Django 3.1及以上版本支持JSONField，可以直接存储Python列表，非常方便：

from django.db import models
from django.contrib.auth.models import User

class ScientificSchedule(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    province = models.CharField(max_length=100, blank=True)
    # 使用JSONField，默认值为空列表
    city = models.JSONField(default=list, blank=True)
    # 其他字段

如果你使用的是旧版本Django或者不支持JSONField的数据库，也可以用TextField存储JSON格式的字符串，然后在模型里添加辅助方法来处理序列化/反序列化：

import json
from django.db import models
from django.contrib.auth.models import User

class ScientificSchedule(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    province = models.CharField(max_length=100, blank=True)
    city = models.TextField(blank=True)
    # 其他字段

    def get_city_list(self):
        """获取城市列表"""
        if self.city:
            return json.loads(self.city)
        return []

    def set_city_list(self, city_list):
        """设置城市列表，自动转为JSON字符串"""
        self.city = json.dumps(city_list)

2. 调整表单处理多选值 #

接下来需要修改表单，确保它能正确处理多选的城市值。我们可以覆盖city字段为MultipleChoiceField，并在clean方法中过滤掉空值：

from django import forms
from .models import ScientificSchedule
import json

class ScientificScheduleForm(forms.ModelForm):
    # 定义多选城市字段，widget使用SelectMultiple
    city = forms.MultipleChoiceField(
        choices=[],  # 因为城市是动态加载的，这里留空由前端处理
        widget=forms.SelectMultiple(attrs={
            'class': 'ant-col ant-select-selection ant-select-selection--multiple',
            'id': 'set-multi'
        }),
        required=False
    )

    class Meta:
        model = ScientificSchedule
        fields = '__all__'

    def clean_city(self):
        """清理城市数据，排除空值"""
        city_list = self.cleaned_data.get('city', [])
        return [city for city in city_list if city.strip()]

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 编辑时回显已选城市
        if self.instance.pk:
            if isinstance(self.instance.city, list):
                self.fields['city'].initial = self.instance.city
            else:
                # 如果是TextField存储的JSON字符串，转成列表
                self.fields['city'].initial = json.loads(self.instance.city)

3. 修正前端HTML的多选样式 #

你的前端HTML中，城市select的class还是ant-select-selection--single，这是单选样式，需要改成多选样式，同时确保multiple属性存在：

<select multiple name="city" class="ant-col ant-select-selection ant-select-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="-1" id="set-multi">
    <option value="" class=""> - </option>
</select>

4. 确保数据正确保存 #

如果使用的是JSONField，表单的clean_city方法返回的列表会直接保存到模型中，不需要额外处理。如果用的是TextField，可以在表单的save方法中处理序列化：

def save(self, commit=True):
    instance = super().save(commit=False)
    # 将列表转成JSON字符串存储
    instance.set_city_list(self.cleaned_data['city'])
    if commit:
        instance.save()
    return instance

这样修改后，当用户选择多个城市提交时，模型的city字段就会保存类似['city1','city4','city5']的列表（JSONField）或者对应的JSON字符串（TextField），完美解决只保存最后一个值的问题。

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