在不使用 ctrl 鍵的情況下從 html select 元素中選擇多個

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事件的默認行為背后的原因是因為如果您不阻止它並且您在移動鼠標時碰巧單擊了一個選項，則所有選項都將被取消選擇。

Answer 4

這是一個似乎適用於 Chrome FF 和 IE 的解決方案。 它不是非常漂亮，因為單擊時它會閃爍一點。

var vals = [];
$("select[multiple]").click(function(e){
        var scroll_offset= this.scrollTop;
      var newVals = $(this).val();
    if (newVals.length === 1) {
        var index = vals.indexOf(newVals[0])
        if (index > -1) {
        vals.splice(index, 1);
      } else {
        vals.push(newVals[0])
      }
      $(this).val(vals);
      this.scrollTop = scroll_offset;
    }
});

提琴手

Answer 5

對於 chrome 中的純 js 解決方案，請將事件偵聽器設置為“onmouseup”。 將滾動重置為第一個元素的事件在鼠標向上時觸發。 例如：

element.onmouseup = function(event) {
    event.preventDefault();
    var st = this.scrollTop;
    setTimeout(function () { element.scrollTop = st; }, 0);
};

Answer 6

這對我來說比其他建議更好，因為它是 vanilla JS 並且它的行為與原始靜止更相似，例如允許通過 shift 鍵快速選擇許多項目。

element.onmousedown = function(event) {
    if (event.shiftKey) return;
    event.preventDefault();
    this.focus();
    var scroll = this.scrollTop;
    event.target.selected = !event.target.selected;
    this.scrollTop = scroll;
    // make sure that other listeners (like Vue) pick up on the change
    // even though we prevented the default.
    this.dispatchEvent(new Event("change"));
}

Answer 7

簡短的快速版本

正在創建

 // this is for specyfic id -> $('#WOStatusKey'). //below for all multiple select $('select[multiple]').mousedown(e=>{ e.target.selected = !e.target.selected; e.stopPropagation(); return false; })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple id="WOStatusKey" name="WOStatusKey"> <option value="1">Created</option> <option value="2">In Process</option> <option value="3">Bla bla bla</option> </select>