如何使用JavaScript获取Django ChoiceField的选中值

Django 渲染 ChoiceField 时默认会生成标准的 <select> 下拉框控件，控件的默认ID格式为 id_<字段名>，你代码里写的 #id_choixLiaison 选择器本身是正确的，代码不生效通常是以下几个可排查的原因：

• 事件绑定时机早于DOM渲染完成：如果你的JS代码放在页面头部，或者放在表单DOM节点之前加载，执行时#id_Start按钮、下拉框还没有被浏览器渲染出来，绑定的点击事件自然不会生效。
• WebSocket 实例未提前初始化：要确保点击事件触发前，你的 Channels WebSocket 连接已经成功建立，否则调用 chatSocket.send 会直接抛出异常，打断代码执行。
• 主动清空下拉框值不符合预期：你在发送完数据后把下拉框的value设为了空，下拉框会自动回退到第一个选项，如果这不是你需要的逻辑可以直接删掉这行代码。

可以用下面的修正代码实现需求：

// 等待页面所有DOM渲染完成后再执行绑定逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 先校验节点是否存在，避免控制台报错
    const startBtn = document.querySelector('#id_Start');
    const liaisonSelect = document.querySelector('#id_choixLiaison');
    if (!startBtn || !liaisonSelect) {
        console.error('找不到对应表单元素，请检查页面渲染后的源码ID是否匹配');
        return;
    }
    startBtn.addEventListener('click', function(e) {
        // 该写法直接获取ChoiceField配置的选项key，返回字符串格式（比如'1'、'2'这类）
        const selectedValue = liaisonSelect.value;
        // 如果需要获取选项的显示文本（比如'RS232_1_Port1'）可以用下面的写法
        // const selectedText = liaisonSelect.options[liaisonSelect.selectedIndex].text;
        
        // 发送前确认WebSocket连接已就绪
        if (chatSocket && chatSocket.readyState === WebSocket.OPEN) {
            chatSocket.send(JSON.stringify({
                'message': selectedValue
            }));
            // 不需要重置下拉框可以删掉下面这行
            // liaisonSelect.value = '';
        } else {
            console.error('WebSocket连接未建立，请检查Channels配置');
        }
    });
});

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