Django模板下拉框取值异常及模板标签传参问题咨询

问题1：下拉框无法获取选中值 #

你给所有<option>加了重复的id="dropdown"，这是错误的——HTML里id必须唯一，而且获取选中值应该监听<select>元素，不是单个option。

修改下拉框结构，把id加到<select>上，给每个<option>设置value存储饮品名称：

<select id="drink-select">
  {% for drink in drink_list %}
    <option value="{{ drink.name }}">{{ drink.name }}</option>
  {% endfor %}
</select>

之后用JS获取选中值就很直接：

const selectElement = document.getElementById('drink-select');
const selectedDrink = selectElement.value; // 直接拿到当前选中的饮品名

问题2：将选中值传入自定义模板标签 #

模板标签是服务器端渲染阶段执行的，而用户选值是客户端的动态行为，没法直接把客户端变量传给模板标签。有两种常用解决方式：

方案1：提前渲染所有饮品的配料到前端 #

把所有饮品的配料数据先通过模板渲染成JS对象，客户端切换时直接读取展示：

<!-- 先渲染配料数据到JS -->
<script>
  const drinkIngredients = {
    {% for drink in drink_list %}
      "{{ drink.name }}": "{{ drink|drink_joins }}",
    {% endfor %}
  };

  // 监听下拉框变化
  document.getElementById('drink-select').addEventListener('change', function() {
    const selected = this.value;
    // 把配料插入到页面容器
    document.getElementById('ingredients-box').textContent = drinkIngredients[selected];
  });
</script>

<!-- 用来展示配料的容器 -->
<div id="ingredients-box"></div>

方案2：通过AJAX动态请求后端 #

如果饮品数据量很大，不想一次性渲染到前端，可以写个后端接口，接收选中的饮品名，调用drink_joins返回配料：

后端视图（以Django为例）

from django.http import JsonResponse
# 假设你的drink_joins过滤器已经定义好
from your_app.templatetags.your_tags import drink_joins

def get_ingredients(request):
    drink_name = request.GET.get('drink')
    if not drink_name:
        return JsonResponse({'error': '请选择饮品'}, status=400)
    ingredients = drink_joins(drink_name)
    return JsonResponse({'ingredients': ingredients})

前端JS

<script>
  document.getElementById('drink-select').addEventListener('change', async function() {
    const drinkName = this.value;
    try {
      const response = await fetch(`/get-ingredients/?drink=${encodeURIComponent(drinkName)}`);
      const data = await response.json();
      document.getElementById('ingredients-box').textContent = data.ingredients;
    } catch (err) {
      console.error('请求出错:', err);
    }
  });
</script>

<div id="ingredients-box"></div>

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