多选框选中内容无法在下方列表展示的技术求助

最直接的问题：函数名不匹配 #

你HTML里的多选框onchange事件绑定的是showResults，但JS里定义的函数名是results——事件触发时找不到对应处理函数，自然没有任何反应。

修复步骤 #

1. 对齐函数名称：要么把HTML里的showResults改成results，要么把JS里的函数名改成showResults，两者保持一致即可。
2. 优化"None"选项逻辑（可选）：默认选中的"None"选项，当用户选择其他选项时应该自动取消选中状态，避免同时显示"None"和其他选项。

修复后的完整代码 #

HTML部分 #

<select
  id="selectcrim"
  multiple="multiple"
  onchange="results(this, event)"
  size="10"
>
  <option selected>None</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<ul id="selectedresults"></ul>

JavaScript部分 #

function results(element, event) {
  const resultList = document.getElementById("selectedresults");
  // 清空现有结果列表
  while (resultList.firstChild) {
    resultList.removeChild(resultList.firstChild);
  }

  let hasOtherSelected = false;
  // 检查是否有非"None"的选项被选中
  for (let i = 1; i < element.options.length; i++) {
    if (element.options[i].selected) {
      hasOtherSelected = true;
      break;
    }
  }

  // 若有其他选项选中，取消"None"的选中状态
  if (hasOtherSelected) {
    element.options[0].selected = false;
  }

  // 遍历所有选项，将选中项添加到结果列表
  for (let i = 0; i < element.options.length; i++) {
    if (element.options[i].selected) {
      const li = document.createElement("li");
      li.textContent = element.options[i].value;
      resultList.appendChild(li);
    }
  }
}

额外小优化 #

• 用textContent替代appendChild(document.createTextNode(...))，写法更简洁。
• 原JS代码里的for (const i = 0; ...)会报错，因为const无法被循环赋值，改成let i即可解决这个潜在问题。

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