javascript - 如何使 HTML 多选像控制按钮始终被按住一样

Question

我有一个我正在处理的 Web 应用程序，它需要一个 HTML 多选元素的操作，就像始终按住控制键一样。即点击一个选项将切换它是否被选中。

我尝试了各种 Jquery 事件绑定，但似乎标准的 HTML 多选行为在 Jquery 绑定事件触发之前执行，因此几乎不可能简单地拦截事件并修改标准行为。

我怎样才能使单击将切换单个选项的选择？

Answer 1

试试这个。您可以将选项值存储在对象中并使用单击操作更新对象，然后将更改应用于选择。

演示

http://jsfiddle.net/iambriansreed/BSdxE/

HTML

<select class="select-toggle" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>​

JavaScript

$('.select-toggle').each(function(){    
    var select = $(this), values = {};    
    $('option',select).each(function(i, option){
        values[option.value] = option.selected;        
    }).click(function(event){        
        values[this.value] = !values[this.value];
        $('option',select).each(function(i, option){            
            option.selected = values[option.value];        
        });    
    });
});​

Answer 2

您可能需要考虑一个更简单的解决方案，例如在其溢出属性设置为滚动的 div 中使用复选框列表。这可能对你更好。获得一个下拉菜单来做你所要求的有点复杂。

例如看这个：

label{display:block;}
    #container{height:100px;width:200px;overflow:scroll;}

<div id="container">
        <label><input type="checkbox" name="test" value="1" />Option 1</label>
        <label><input type="checkbox" name="test" value="2" />Option 2</label>
        <label><input type="checkbox" name="test" value="3" />Option 3</label>
        <label><input type="checkbox" name="test" value="4" />Option 4</label>
        <label><input type="checkbox" name="test" value="5" />Option 5</label>
        <label><input type="checkbox" name="test" value="6" />Option 6</label>
        <label><input type="checkbox" name="test" value="7" />Option 7</label>
        <label><input type="checkbox" name="test" value="8" />Option 8</label>
        <label><input type="checkbox" name="test" value="9" />Option 9</label>
        <label><input type="checkbox" name="test" value="10" />Option 10</label>
        <label><input type="checkbox" name="test" value="11" />Option 11</label>
        <label><input type="checkbox" name="test" value="12" />Option 12</label>
    </div>

Answer 3

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

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

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

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 4

上述解决方案都具有不支持复选框中的选择的主要缺点，这实际上是我<select>首先使用 -boxes 而不是 checkbox-inputs 的原因。最初我访问此页面以找到解决此问题的内置方法，但考虑到上述答案，我将只编写自己的代码。

以下代码还有一个优点，即它不会在 mouseup 上更新，而不是在 iambriansreed 的当前最佳答案上更新，而是在 mousedown 上更新，这是浏览器中的默认行为。

只是为了帮助未来的谷歌人，我的代码如下：

// Copyright (c) 2018 Joeytje50. All rights reserved.
// This code is licenced under GNU GPL3+; see <http://www.gnu.org/licenses/>

// Source code and most recent version:
// https://gist.github.com/Joeytje50/2b73f9ac47010e7fdc5589788b80af77

// select all <options> within `sel` in the range [from,to]
// change their state to the state sel.options[from] is in,
// ie. change it to the current state of the first selected element
function selectRange(sel, from, to) {
  var toState = sel.options[from].selected;
  // make sure from < to:
  if (from > to) {
    var temp = from;
    from = to;
    to = temp;
  }
  if (!(sel instanceof HTMLSelectElement)) {
    throw new TypeError('selectRange requires a single non-jQuery select-element as first parameter');
  }
  // (de)select every element
  for (var i=from; i<=to; i++) {
    sel.options[i].selected = toState;
  }
}

$(function() {
  $('.addSelect').data('select-start', 0); // default selection start
  $('.addSelect').on('mousedown', function(e) {
    $(this).focus();
    // clicking on the edge of the <select> shouldn't do anything special
    if (!$(e.target).is('option')) return;
    // if Ctrl is pressed, just let the built-in functionality take over
    if (e.ctrlKey) return;
    // keep everything selected that's not affected by the range within a shift-click
    if (e.shiftKey) {
      var fromIdx = $(this).data('select-start')
      selectRange(this, $(this).data('select-start'), e.target.index);
      e.preventDefault();
      return false;
    }
    // save the starting <option> and the state to change to
    $(this).data('select-start', e.target.index);
    e.target.selected = !e.target.selected;
    e.preventDefault();
    // save a list of selected elements, to make sure only the selected <options>
    // are added or removed when dragging
    var selected = [];
    for (var i=0;i<this.selectedOptions.length;i++) {
      selected.push(this.selectedOptions[i].index);
    }
    $(this).data('selected', selected);
    $(this).children('option').on('mouseenter', function(e) {
      var sel = this.parentElement;
      // first reset all options to the original state
      for (var i=0;i<sel.options.length;i++) {
        if ($(sel).data('selected').indexOf(i) == -1) {
          sel.options[i].selected = false;
        } else {
          sel.options[i].selected = true;
        }
      }
      // then apply the new range to the elements
      selectRange(sel, $(sel).data('select-start'), e.target.index);
    });
  });
  // clean up events after click event has ended.
  $(window).on('mouseup', function() {
    $('.addSelect').children('option').off('mouseenter'); // remove mouseenter-events
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="addSelect" multiple size="10">
<option value="0">Foo0</option>
<option value="1">Bar1</option>
<option value="2">Baz2</option>
<option value="3">Lol3</option>
<option value="4">Heh4</option>
<option value="5">Hey5</option>
<option value="6">Meh6</option>
<option value="7">Xcq7</option>
<option value="8">Hmm8</option>
<option value="9">End9</option>
</select>

随意使用此代码，只需将其复制到您想要使用它的任何项目中即可。