如何在Django视图中获取前端Select下拉选项的选中值

HTML表单模板 #

<form action="" method="post">
{% csrf_token %}
<div class="d-flex form-inputs">
<select class="form-select" aria-label=".form-select-lg" name="lang_txt">
<option value="span_to_eng">Spanish To English</option>
<option value="eng_to_span">English To Spanish</option>
<option value="french_to_eng">French To English</option>
</select>
<input name="txt" class="form-control p-3" type="text" placeholder="Search...">
<a href="#"><img src="/static/assets/image/search.png" alt=""></a>
</div>
</form>

视图函数代码 #

def lang_convert_view(request):
if request.method == "POST" and 'txt' in request.POST:
    txt = request.POST.get('txt')
    selected_lang = request.POST['lang_txt']
    data = custom_function_name(txt)
    context = {'data': data}
else:
    context = {}
return render(request, 'index.html', context)

实现目标：在视图函数中正确获取select下拉框的用户选中值。

你的代码存在3个直接阻碍功能实现的问题，按以下步骤修正即可：

• 修复表单提交触发逻辑：当前搜索图标被包裹在<a href="#">标签中，点击只会触发锚点跳转，不会提交表单，后端无法收到任何POST参数。将a标签替换为submit类型的按钮即可解决：

  <!-- 替换原有<a>标签代码 -->
  <button type="submit" class="btn p-0 border-0 bg-transparent">
      <img src="/static/assets/image/search.png" alt="提交">
  </button>
  

• 修复视图层基础语法问题：Python靠缩进区分代码块，你当前if/else下的代码没有做4空格统一缩进，运行会直接抛出语法错误，调整缩进即可修复。
• 调整视图逻辑判断与参数传递规则：
  1. 去掉'txt' in request.POST的判断条件，用户提交空输入内容时该条件不成立，会导致下拉框参数读取逻辑不执行，只要是POST请求就进入参数读取流程即可
  2. 统一用request.POST.get()方法取值，设置空值/默认值兜底，避免键不存在时抛出异常
  3. 读取到的下拉框选中值需要传入自定义处理函数，同时放入上下文返回给前端，否则取值后无法参与后续业务逻辑

修正后的完整视图代码：

def lang_convert_view(request):
    context = {}
    if request.method == "POST":
        txt = request.POST.get('txt', '')
        # 可设置默认值兜底，避免异常场景下取值为空
        selected_lang = request.POST.get('lang_txt', 'span_to_eng')
        data = custom_function_name(txt, selected_lang)
        context = {
            'data': data,
            'selected_lang': selected_lang,
            'input_txt': txt
        }
    return render(request, 'index.html', context)

补充说明：select标签默认会选中第一个option选项，只要表单正常提交，lang_txt字段就会被提交到后端，不需要额外给option加selected属性就能正常取值。

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