如何使用 Javascript 避免在多选框中按住 Ctrl 键并单击？

Question

我认为这将是一个简单的黑客攻击，但我现在已经搜索了几个小时，但找不到正确的搜索词。我想要一个普通的多重选择框 ()，但我不希望用户必须按住控制键才能进行多项选择。

换句话说，我想要左键单击来切换光标下的 元素，而不更改任何其他元素。换句话说，我想要看起来像组合列表框但行为像一组复选框的东西。

有人能建议一个简单的方法来用 Javascript 做到这一点吗？谢谢。

Answer 1

检查这个小提琴： http://jsfiddle.net/xQqbR/1022/

你基本上需要覆盖每个 的 mousedown 事件，并在其中切换 selected 属性。

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

为简单起见，我在上面指定了“选项”作为选择器。您可以对其进行微调以匹配特定 元素下的s。例如：$('#mymultiselect option')

Answer 2

必须自己解决这个问题，并注意到错误行为，即简单拦截mousedown 并设置属性，因此覆盖了 select 元素并且效果很好。

jsFiddle: http://jsfiddle.net/51p7ocLw/

注意： 这段代码确实通过替换 DOM 中的 select 元素来修复错误行为。这有点激进，会破坏您可能附加到元素的事件处理程序。

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);
    }
}

<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>

Answer 3

techfoobar的答案是有问题的，如果您拖动鼠标，它会取消选择所有选项。

Sergio 的答案很有趣，但是克隆和删除绑定到下拉列表的事件并不是一件好事。

尝试这个答案。

注意：不适用于 Firefox，但在 Safari/Chrome/Opera 上完美运行。 （我没有在 IE 上测试它）

编辑（2020）

自我最初的回答以来 5 年后，我认为这里的最佳实践是用复选框替换下拉菜单。想想看，这就是复选框存在的主要原因，并且它可以很好地与 IE 和 IE 等旧浏览器配合使用。现代手机没有任何自定义 JS 来处理所有古怪的场景。

Answer 4

死灵术。
所选答案没有 jQuery。
另外，它错过了单击选项时设置焦点的机会，因为如果您编写 e.preventDefault，则必须自己执行此操作...
忘记聚焦会影响 CSS 样式，例如 bootstrap 等。

var options = [].slice.call(document.querySelectorAll("option"));

options.forEach(function (element)
{
    // console.log("element", element);
    element.addEventListener("mousedown", 
        function (e)
        {
            e.preventDefault();
            element.parentElement.focus();
            this.selected = !this.selected;
            return false;
        }
        , false
    );
});

Answer 5

可重用和纯JavaScript解决方案

const multiSelectWithoutCtrl = ( elemSelector ) => {
  
  let options = document.querySelectorAll(`${elemSelector} option`);
  
  options.forEach(function (element) {
      element.addEventListener("mousedown", 
          function (e) {
              e.preventDefault();
              element.parentElement.focus();
              this.selected = !this.selected;
              return false;
          }, false );
  });

}


multiSelectWithoutCtrl('#mySelectInput') /* Can use ID or Class */

option {
font-size: 20px;
padding: 10px 20px;
}

<select multiple id="mySelectInput" class="form-control">

  <option>

Answer 6

我今天遇到了同样的问题，通常建议是使用隐藏复选框列表并通过 css 模拟行为，这样更容易管理，但就我而言，我不想修改 html。

目前我仅使用谷歌浏览器测试了此代码，我不知道是否适用于其他浏览器，但它应该：

var changed;
$('select[multiple="multiple"]').change(function(e) {
    var select = $(this);
    var list = select.data('prevstate');
    var val = select.val();
    if (list == null) {
        list = val;
    } else if (val.length == 1) {
        val = val.pop();
        var pos = list.indexOf(val);
        if (pos == -1)
            list.push(val);
        else
            list.splice(pos, 1);
    } else {
        list = val;
    }
    select.val(list);
    select.data('prevstate', list);
    changed = true;
}).find('option').click(function() {
    if (!changed){
        $(this).parent().change();
    }
    changed = false;
});

当然欢迎建议，但我还没有找到其他方法