不使用Ctrl键从html选择元素中选择多个 [英] Selecting multiple from an html select element without using ctrl key

问题描述

基本上，我发现不得不按住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 =WOStatusKeyname =WOStatusKey> 
< option value =1>创建< / option> 
< option value =2>在处理< / option> 
 <！ - 等（其中约20个） - > 
< / select> 
  

它可以正常工作，但有一个例外：任何时候选择/取消选择的东西都​​不在顶部该列表（您必须滚动才能看到该列表），然后在选择它后弹出回顶部。我已经玩了一下，但无法弄清楚什么来防止这种行为。另外，我也看到了一些其他解决方案，尽管没有任何工作或运行良好。

我只需要这个在Chrome中工作。此外，我对使用选择列表的任何其他解决方案不感兴趣。

感谢您的任何帮助，非常感谢。

解决方案

您可以保存 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/

I've come across various solutions to this issue on the net.

Basically, I find having to hold down ctrl a bit cheesy, and I want the select list to just select whatever I click on and add it to the currently selected items.

I've already got this code:

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

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

        return false;            
    });

Element:

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

It works fine with one exception: any time something is selected/deselected that is not at the top of the list (where you have to scroll to see it) then it pops back up to the top after you select it. I've played around with it a little bit but can't figure out anything to prevent this behavior. Also, I've seen a couple other solutions to this problem, although nothing that either works or works well.

I only need this to work in Chrome. Also, I am not interested in any alternative solutions to using a select list.

Thank you for any help, it is much appreciated.

解决方案

You can save the Element.scrollTop and set it at the end.

$("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/

这篇关于不使用Ctrl键从html选择元素中选择多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！