Django模板中如何实现select下拉框保留用户选中的option值

核心需要修改两处：视图层把选中值传入模板，模板层给匹配的选项加selected属性。

1. 修改视图函数，补充选中值到上下文 #

你之前已经拿到了用户选择的selected_lang变量，只需要把它加到返回的context里即可，首次访问时设置默认选中值，避免模板取值报错：

def lang_convert_view(request):
    if request.method == "POST" and 'txt' in request.POST:
        txt = request.POST.get('txt')
        selected_lang = request.POST.get('lang_txt')
        data = custom_function_name(txt)
        context = {
            'data': data,
            'selected_lang': selected_lang  # 新增：传入用户选中的语言值
        }
    else:
        context = {
            'selected_lang': 'span_to_eng'  # 首次访问默认选中首项
        }
    return render(request, 'index.html', context)

2. 修改模板下拉选项，绑定选中状态 #

给每个<option>标签增加Django模板判断，当选项value和传入的selected_lang一致时，添加selected属性，浏览器就会自动把该选项展示为当前选中项：

<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" {% if selected_lang == 'span_to_eng' %}selected{% endif %}>Spanish To English</option>
<option value="eng_to_span" {% if selected_lang == 'eng_to_span' %}selected{% endif %}>English To Spanish</option>
<option value="french_to_eng" {% if selected_lang == 'french_to_eng' %}selected{% endif %}>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>

效果说明 #

• 首次打开页面时，默认展示首项「Spanish To English」，和原有逻辑完全一致
• 用户选择任意选项提交表单后，下拉框会自动保持用户上次选择的选项，不会重置回首项
• 如果后续下拉选项数量增多，也可以把选项列表整理成字典/列表从视图传入，用{% for %}循环渲染，减少重复的判断代码

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