1

我一直在网上四处寻找，但似乎无法找到我所提出问题的直接答案。

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

<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（这可能是我本周遇到的最糟糕的想法）。
  • 更改选定的属性。但是，当您单击下一个项目时，这会取消选择（至少它的视觉部分）。

我宁愿不使用任何插件，除非没有其他干净的方法可以这样做。

4

1 回答 1

-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

于 2013-07-18T14:38:52.530 回答