我有一个我正在处理的Web应用程序，它需要一个HTML多选元素，就像控制键一直处于按下状态一样。即点击一个选项将切换是否被选中。
我尝试了各种Jquery事件绑定，但看起来标准的HTML多选行为在Jquery绑定事件触发之前执行，这使得简单地拦截事件和修改标准行为几乎不可能。
我怎样才能使单击会切换单个选项的选择？
试试吧。您可以将选项值存储在对象中，并使用单击操作更新对象，然后将更改应用于选择。
演示
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];
});
});
});
您可能需要考虑一个更简单的解决方案，例如使用其overflow属性设置为scroll的div内的复选框列表。这对你来说可能更好。得到一个下拉来做你所问的事情有点牵扯。
例如，请参阅this fiddle
HTML
<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>
CSS
label{display:block;}
#container{height:100px;width:200px;overflow:scroll;}
不得不自己解决这个问题，并注意到bugged behavior a simple interception of the mousedown和设置属性将有，所以做了一个覆盖选择元素，它运作良好。
注意：此代码通过替换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>上面的解决方案都有不支持选中复选框的主要缺点，这实际上是我首先在复选框输入上使用<select>-boxes的原因。最初我访问了这个页面，找到了解决这个问题的内置方法，但考虑到上面的答案，我只想编写自己的代码。
以下代码还具有以下优点：它不会在mouseup上更新，而不是iambriansreed当前的最佳答案，而是在mousedown上，这是浏览器中的默认行为。
只是为了帮助未来的googlers，我的代码如下：
// 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>只需将其复制到您想要使用它的任何项目，即可随意使用此代码。