如何在多选下拉列表中只允许选择某些值的一个选项？

Question

我想用以下选项制作一个下拉菜单。我希望能够为选项 A、B 和 C 选择一个多选值，但如果选择了选项 D，则禁用多选。我怎样才能做到这一点？谢谢。<label>Choose an option:</label>  <select required multiple>    <option>Please select</option>    <option value="A">A</option>    <option value="B">B</option>    <option value="C">C</option>    <option value="D">C</option>  </select>

Answer 1

如果选择了“D”，则删除其他选定的选项，否则允许多选。

{

  document.addEventListener("mouseup", checkMultiple);

  function checkMultiple(evt) {

    if (!/option/i.test(evt.target.nodeName)) {

      return true;

    }

    const selector = evt.target.parentNode;

    const options = [...selector.querySelectorAll("option")];

    if (options.find(v => v.value === "D").selected) {

      options

        .filter(v => v.value !== "D")

        .forEach(v => v.selected = false);

    }

  }

}

<label>Choose an option:</label>

<select required multiple>

  <option>Please select</option>

  <option value="A">A</option>

  <option value="B">B</option>

  <option value="C">C</option>

  <option value="D">D</option>

</select>