如何在Django中不使用submit获取HTML select的选中值

当然可以，你可以通过JavaScript监听选择事件来实现，既不需要提交表单，也不会导致页面刷新，select也会保持当前选中状态。下面分两种场景给出具体实现：

场景1：仅前端使用选中值（无需后端交互） #

直接监听select的change事件，实时获取选中值，用于前端操作（比如显示、计算等）。

修改你的index.html：

<select name="drop_desi" id="drop_desi">
    <option disabled selected value> -- select value -- </option>
    {% for i in designation_liste %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
</select>

<!-- 可选：用来展示选中结果 -->
<div id="selected-result"></div>

<script>
// 获取select元素
const selectEl = document.getElementById('drop_desi');

// 监听选择变化事件
selectEl.addEventListener('change', function() {
    const selectedVal = this.value;
    if (!selectedVal) return; // 跳过默认的空选项

    // 这里可以直接使用选中值做前端操作
    console.log('当前选中值：', selectedVal);
    document.getElementById('selected-result').textContent = `你选中了：${selectedVal}`;
});
</script>

场景2：需要将选中值传给后端（无页面刷新） #

如果需要把选中值发送到Django后端处理，可以用**AJAX（Fetch API）**实现，既完成数据传输，又不会刷新页面。

第一步：修改Django视图（views.py） #

处理AJAX请求，返回JSON格式的响应：

from django.http import JsonResponse

def index(request):
    # 处理AJAX POST请求
    if request.method == 'POST' and request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        id_desi = request.POST.get('drop_desi')
        # 这里可以添加你的业务逻辑，比如查询数据库、处理数据等
        return JsonResponse({
            'status': 'success',
            'selected_value': id_desi,
            # 可以返回更多后端处理后的结果
        })
    
    # 普通GET请求返回页面
    return render(request, 'index.html', {'designation_liste': df.designation_liste})

第二步：修改前端页面（index.html） #

去掉submit按钮，添加AJAX请求代码：

<select name="drop_desi" id="drop_desi">
    <option disabled selected value> -- select value -- </option>
    {% for i in designation_liste %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
</select>

<!-- 用来展示后端返回的结果 -->
<div id="backend-response"></div>

<script>
const selectEl = document.getElementById('drop_desi');
// 获取Django的CSRF令牌（必须，否则POST请求会被拦截）
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

selectEl.addEventListener('change', function() {
    const selectedVal = this.value;
    if (!selectedVal) return;

    // 发送AJAX请求到后端
    fetch("{% url 'DataMat-index' %}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest', // 标记为AJAX请求
            'X-CSRFToken': csrfToken
        },
        body: `drop_desi=${encodeURIComponent(selectedVal)}`
    })
    .then(response => response.json())
    .then(data => {
        // 处理后端返回的数据
        console.log('后端响应：', data);
        document.getElementById('backend-response').textContent = `后端已接收选中值：${data.selected_value}`;
    })
    .catch(err => {
        console.error('请求失败：', err);
    });
});
</script>

这样操作后，你选择选项时，页面不会刷新，select会保持当前选中的状态，同时也能完成和后端的数据交互。

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