如何在用户提交表单前获取多选下拉框的已选选项并填充到其他输入框

问题排查 #

你现有代码存在3个核心错误：

• 多选下拉框没有加id="misstanke"属性，document.getElementById("misstanke")拿不到对应DOM元素，返回为null
• 赋值逻辑错误：你给输入框赋值时传了整个select DOM对象select1，而不是你收集好的选中值数组selected1
• 没有给多选下拉框绑定变更触发事件，选中选项时Straff函数根本不会执行

修正代码 #

第一步：修改多选下拉框HTML #

新增id属性和onchange触发规则：

<div class="col-12">
  <label for="misstanke" class="form-label">Lagöverträdelser</label>
  <select multiple id="misstanke" name="misstanke[]" onkeydown="return event.key != 'Enter';" onchange="Straff()" class="form-select form-select-md">
    <?php
    include('selects/overtradelser.php');
    ?>
  </select>
</div>

第二步：修改JS逻辑 #

function Straff() {
    var select1 = document.getElementById("misstanke");
    var selected1 = [];
    // 收集选中项
    for (var i = 0; i < select1.options.length; i++) {
        if (select1.options[i].selected) {
            // 如果需要取选项的显示文本而非提交值，把.value换成.text即可
            selected1.push(select1.options[i].value);
        }
    }
    // 数组转逗号分隔字符串赋值给输入框，直接修改value属性比setAttribute更适配表单元素
    document.getElementById("straff").value = selected1.join(', ');

    // 后续需要查询数据库的话，在这里加AJAX请求即可，示例逻辑：
    /*
    fetch('你的后端查询接口地址', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'selectedValues=' + encodeURIComponent(JSON.stringify(selected1))
    }).then(res => res.text()).then(queryResult => {
        // 把后端返回的查询结果赋值到输入框或其他展示位置
        // document.getElementById("straff").value = queryResult;
    })
    */
}

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