从html选择元素中选择多个而不使用ctrl键

Question

我在网上遇到过这个问题的各种解决方案.

基本上,我发现不得不按住ctrl有点俗气,我希望选择列表只选择我点击的任何内容并将其添加到当前选定的项目.

我已经有了这个代码:

    $("select[multiple] option").mousedown(function () {
        var $self = $(this);            

        if ($self.attr("selected")) {                
            $self.removeAttr("selected", "");
        }
        else {
            $self.attr("selected", "selected");
        }

        return false;            
    });

元件:

    <select multiple id="WOStatusKey" name="WOStatusKey">                
        <option value="1">Created</option>
        <option value="2">In Process</option>
        <!-- etc. (about 20 of these) -->
    </select>

它可以正常工作,但有一个例外:任何时候选择/取消选择某个不在列表顶部的东西(你必须滚动查看它),然后它会在您选择它后弹回到顶部.我已经玩了一点但是无法找出任何可以阻止这种行为的东西.此外,我已经看到了这个问题的其他几个解决方案,虽然没有任何工作或运作良好.

我只需要在Chrome中使用它.此外,我对使用选择列表的任何替代解决方案不感兴趣.

感谢您的帮助,非常感谢.

Answer 1

您可以保存Element.scrollTop并将其设置在最后.

$("select").mousedown(function(e){
    e.preventDefault();

    var select = this;
    var scroll = select .scrollTop;

    e.target.selected = !e.target.selected;

    setTimeout(function(){select.scrollTop = scroll;}, 0);

    $(select ).focus();
}).mousemove(function(e){e.preventDefault()});

http://jsfiddle.net/UziTech/cjjg68dr/114/

Answer 2

托尼的回答使选择箭头有问题，因为它们只有在您按住鼠标时才起作用。

我已经结合了一些解决方案，它至少在 Chrome 和 FF 中运行良好：

// multiple select: selectable without Control
$('select[multiple] option').on('mousedown', function(e) {
    var $this = $(this),
        that = this,
        scroll = that.parentElement.scrollTop;

    e.preventDefault();
    $this.prop('selected', !$this.prop('selected'));

    setTimeout(function() {
        that.parentElement.scrollTop = scroll;
    }, 0);

    return false;
});

Answer 3

这是一个纯JS解决方案:

element.onmousedown= function(event) {
    //this == event.target
    event.preventDefault();
    var scroll_offset= this.parentElement.scrollTop;
    this.selected= !this.selected;
    this.parentElement.scrollTop= scroll_offset;
}
element.onmousemove= function(event) {
    event.preventDefault();
}

在选择/取消选择选项之前,请查看父元素(选择框)并记录垂直滚动偏移.然后在执行操作后手动重置它.

防止mousemove事件默认行为的原因是因为如果您不阻止它并且您在移动鼠标时碰巧单击某个选项,则所有选项都将被取消选中.