jQuery多项选择（ctrl单击）到多项选择（单击）

Question

我一直在网上浏览，但是似乎无法找到我所遇到问题的直接答案。

我有这样的多个下拉菜单：

<form action="form_action.asp">
<select name="cars" id="mySelect" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

现在众所周知，您可以使用ctrl + click在此列表中选择多个项目。

我想将其更改为单击即可。

我已经尝试了几件事：

• 单击时模拟ctrl（这可能是最糟糕的想法我这星期有过）。
• 更改所选属性。然而，这得到了选择（其视觉部分至少）在单击下一步时撤消项目。

我希望不要使用任何插件，除非没有其他干净的方法可以使用。

Answer 1

通用格式

  <select multiple size="5">
    <option value="Cat">Cat</option>
    <option value="Frog">Frog</option> 
    <option value="Dog">Dog</option>
    <option value="Monkey">Monkey</option> 
    <option value="Parrot">Parrot</option> 
  </select>

您可以使用

<script>
window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}
</script>

工作示例：https://output.jsbin.com/caxacaz