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

Question

我认为这将是一个简单的黑客攻击,但我现在已经搜索了几个小时,无法找到合适的搜索词.我希望有一个普通的多选框(<select multiple="multiple">),除了我不希望用户必须按住控制键进行多项选择.

换句话说,我想要左键单击以切换<option>光标下的元素而不更改任何其他元素.换句话说,我想要的东西看起来像一个组合列表框,但表现得像一组复选框.

任何人都可以在Javascript中建议一个简单的方法吗？谢谢.

Answer 1

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

您基本上需要mousedown为每个事件覆盖事件<option>并在selected那里切换属性.

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

为简单起见,我将'option'作为上面的选择器.您可以对其进行微调以匹配<option>s特定<select>元素.例如:$('#mymultiselect option')

Answer 2

不得不自己解决这个问题,并注意到错误的行为是一个简单的拦截mousedown和设置属性将有,所以做了一个覆盖的选择元素,它运作良好.

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的答案是错误的,如果你拖动鼠标它会取消选择所有选项.

塞尔吉奥的答案很有意思,但克隆和删除事件 - 绑定到下拉列表并不是一件好事.

试试这个答案.

注意:不适用于Firefox,但在Safari/Chrome/Opera上运行完美.(我没有在IE上测试它)

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