Django模板中无刷新实时展示表单选择值的实现问题

问题根源 #

Django是后端服务器渲染框架，模板中的{{ form.apartment_type.value }}是页面加载时由后端生成的静态值，页面渲染完成后这个变量就固定了，无法像Angular那样自动实现双向数据绑定。你当前视图里实例化的是空表单，没有传入初始值，所以这个值一直是None，且前端操作不会触发后端重新渲染模板变量。

解决方案：使用前端JavaScript实现实时更新 #

要实现无刷新实时展示选中值，需要通过JavaScript监听下拉框的选择事件，动态更新页面上的显示内容。具体步骤如下：

1. 修改模板，添加显示容器
   在模板中新增一个用于展示选中值的元素，并利用Django自动生成的字段ID（id_apartment_type）定位下拉框：

   {% load static %}
   <form>
       {% csrf_token %}
       {{ form.as_p }}
       <input type="submit" value="Save">
   </form>
   
   <!-- 新增显示选中值的容器 -->
   <div>当前选中的公寓类型：<span id="selected-apartment-type">请选择</span></div>
   

2. 添加JavaScript监听事件
   在模板末尾添加原生JavaScript代码，监听下拉框的change事件，实时更新显示内容：

   <script>
       // 获取下拉框和显示容器元素
       const apartmentSelect = document.getElementById('id_apartment_type');
       const displayElement = document.getElementById('selected-apartment-type');
   
       // 页面加载时初始化显示（如果表单有初始选中值）
       if (apartmentSelect.value) {
           displayElement.textContent = apartmentSelect.options[apartmentSelect.selectedIndex].text;
       }
   
       // 监听选择变化事件
       apartmentSelect.addEventListener('change', function() {
           // 获取选中项的显示文本（若需要获取模型ID，直接用this.value）
           const selectedText = this.options[this.selectedIndex].text;
           displayElement.textContent = selectedText;
       });
   </script>
   

补充说明 #

• 若需要获取选中项的模型主键ID，直接使用this.value即可，Django的ModelChoiceField生成的下拉选项value属性对应模型实例的主键。
• 若要设置默认选中值，可在视图中传入初始数据：

  def location(request):
      # 示例：默认选中第一个公寓类型
      initial_data = {'apartment_type': ApartmentType.objects.first().id}
      context = {'form': LocationForm(initial=initial_data)}
      return render(request, 'prospects/location.html', context)
  

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