Django实现IntegerField对应范围数字的常规垂直下拉选择框

你当前的代码存在3个核心错误，直接导致下拉选项渲染不符合预期：

• 动态生成的数字<option>被直接追加到了前置下拉的选项标签内部，没有挂载到独立的Num下拉选择框中，DOM结构完全不符合select组件规范
• 循环内重复引入jQuery、重复给元素绑定相同idempla，多轮循环后出现id冲突，DOM选择逻辑完全失效
• 循环计数从0开始，生成的选项包含0值，不符合你需要1到字段上限值的需求
• 没有绑定前置下拉框的切换事件，切换前置选项时Num下拉的可选值不会同步更新

1. 调整模板基础结构 #

先拆分两个下拉框的独立结构，禁止在循环内重复引入脚本资源，基础模板代码如下：

<!-- 注意：jQuery只需要在页面公共头部引入1次即可，不要在循环内重复加载 -->

<!-- 前置关联下拉框：用于选择对应货架 -->
<select id="rayon-select" name="rayon">
  {% for i in rayons %}
  <option value="{{ i.pk }}" data-max-num="{{ i.Nombre_des_Emplacments }}">{{ i.Nombre_des_Emplacments }}</option>
  {% endfor %}
</select>

<!-- 目标Num下拉框：用于展示1到上限值的数字选项 -->
<select id="num-select" name="num">
  <!-- 所有数字选项由JS动态生成，不需要提前写静态内容 -->
</select>

实现技巧：给每个前置选项添加data-max-num自定义属性，直接存储当前选项对应的数字上限，不需要额外编写接口传递参数。

2. 编写动态渲染逻辑 #

封装通用的选项更新函数，在页面初始化、前置下拉选项切换时调用，自动重新生成Num下拉的可选值：

// 封装数字下拉选项更新方法
function updateNumOptions(maxNum) {
  const $numSelect = $('#num-select');
  // 清空下拉框内原有旧选项
  $numSelect.empty();
  // 从1开始循环到上限值，逐一生成标准option标签
  for (let i = 1; i <= maxNum; i++) {
    $('<option/>', {
      value: i,
      text: i
    }).appendTo($numSelect);
  }
}

// 页面加载完成后初始化绑定事件
$(function() {
  // 读取默认选中的前置项对应的上限值，生成初始数字选项
  const defaultMax = $('#rayon-select option:selected').data('max-num');
  updateNumOptions(defaultMax);

  // 监听前置下拉框的切换事件，选中项变化时重新渲染数字选项
  $('#rayon-select').on('change', function() {
    const currentMax = $(this).find('option:selected').data('max-num');
    updateNumOptions(currentMax);
  })
})

修正后两个下拉框都是标准select组件结构：

• 页面加载时自动读取默认选中前置项的上限值，生成垂直排列的1到上限的数字选项，和常规下拉菜单交互逻辑完全一致
• 切换前置下拉的任意选项时，Num下拉会自动清空旧选项，同步生成对应取值范围的新选项
• 所有选项都是标准option标签，支持正常点选、表单提交取值，不会出现结构错乱问题

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