如何实时合并Django表单中两个下拉框值到指定CharField

核心问题分析 #

你之前的jQuery代码未生效，主要有两个关键问题：

• 选择器错误：你给#option_a、#option_b这两个div绑定了change事件，但实际触发change的是div内部的<select>元素；且目标输入框的ID不是#new_option，Django ModelForm生成的字段ID为id_combine_name。
• 模型存在bug：ProjectID类的__str__方法返回self.project_name，但该模型并没有这个字段，会导致下拉框显示异常，应返回自身的project_id字段。

修正步骤 #

1. 修正Model代码

修改model.py中的ProjectID类：

class ProjectID(models.Model):
    project_id = models.CharField(max_length=120, unique=True)

    def __str__(self):
        return self.project_id  # 修正为返回自身的project_id字段

class ProjectName(models.Model):
    project_name = models.CharField(max_length=120, unique=True)

    def __str__(self):
        return self.project_name

class Project(models.Model):
    combine_name = models.CharField(max_length=50, unique=True)
    project_id = models.ForeignKey(ProjectID,
                                   related_name='p_number',
                                   on_delete=models.CASCADE)
    project_name = models.ForeignKey(ProjectName,
                                     related_name='p_name',
                                     on_delete=models.CASCADE)  

    def __str__(self):
        return f"{self.project_id}_{self.project_name}"

2. 修正模板中的jQuery代码

在project-add.html的{% block main-body %}末尾添加正确的jQuery代码（需确保页面已引入jQuery库）：

{% block main-body %}
<div class="container">
  <form method="post" class="form card p-3 mt-5">
    {% csrf_token %}
    <div class="row align-items-start">
      <div class="col-md-4" id="option_a">
        {{ form.project_id|as_crispy_field }}
      </div>
      <div class="col-md-4" id="option_b">
        {{ form.project_name|as_crispy_field }}
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-md-8">{{ form.combine_name|as_crispy_field }}</div>
    </div>
  </form>
</div>

<!-- 若页面未引入jQuery，需添加这一行 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 绑定两个下拉框的change事件
$('#id_project_id, #id_project_name').change(function() {
    // 获取下拉框选中的文本（如果要获取数据库主键ID，改用.val()）
    var projectIdText = $('#id_project_id option:selected').text();
    var projectNameText = $('#id_project_name option:selected').text();
    // 合并后填充到combine_name输入框
    $('#id_combine_name').val(projectIdText + '_' + projectNameText);
});
</script>
{% endblock main-body %}

关键说明 #

• Django ModelForm自动生成的字段ID格式为id_<字段名>，可通过查看页面源代码确认具体ID。
• 若需要合并下拉框的value值（即数据库主键ID），直接替换为.val()即可，例如var projectId = $('#id_project_id').val();。

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