如何避免使用 Javascript 在多选框中单击 ctrl？

我以为这只是一个简单的黑客行为，但是我已经搜索了几个小时，却找不到合适的搜索词。我想有一个普通的多重选择框(<select multiple="multiple">) ，但我不希望用户必须按住控制键，使多个选择。

换句话说，我希望通过左键单击来切换光标下的 <option>元素，而不用更改其他任何元素。换句话说，我希望看起来像一个组合列表框，但行为类似于一组复选框。

有人能提供一个用 Javascript 做这件事的简单方法吗? 谢谢。

78254 次浏览
小开
最佳答案

检查这个小提琴: http://jsfiddle.net/xQqbR/1022/

您基本上需要为每个 <option>重写 mousedown事件，并在那里切换 selected属性。

$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});

为了简单起见，我在上面的选择器中给出了“选项”。您可以在特定的 <select>元素下对其进行微调以匹配 <option>s。例如: $('#mymultiselect option')

小开

我今天遇到了同样的问题，通常的建议是使用一个隐藏的复选框列表，并通过 css 模拟行为，这样更容易管理，但在我的情况下，我不想修改 html。

目前我只用 google chrome 测试了这段代码，我不知道是否可以和其他浏览器一起工作，但是应该可以:

var changed;
$('select[multiple="multiple"]').change(function(e) {
var select = $(this);
var list = select.data('prevstate');
var val = select.val();
if (list == null) {
list = val;
} else if (val.length == 1) {
val = val.pop();
var pos = list.indexOf(val);
if (pos == -1)
list.push(val);
else
list.splice(pos, 1);
} else {
list = val;
}
select.val(list);
select.data('prevstate', list);
changed = true;
}).find('option').click(function() {
if (!changed){
$(this).parent().change();
}
changed = false;
});

当然，建议是受欢迎的，但我没有找到其他方法

小开

必须自己解决这个问题，并注意到 一个简单的对 mousedown的拦截和设置属性将有，所以覆盖了 select 元素，它工作得很好。

http://jsfiddle.net/51p7ocLw/

注意: 这段代码通过替换 DOM 中的 select 元素来修复 bug 行为。这有点激进，会破坏您可能已经附加到元素的事件处理程序。

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>

小开

Techfoobar 的答案是错误的，如果你拖动鼠标，它会取消选择所有选项。

Sergio 的回答很有趣，但是克隆和删除绑定到下拉列表的事件并不是一件好事。

试试这个答案。

注意: 不能在 Firefox 上运行，但在 Safari/Chrome/Opera 上运行良好。(我没有在 IE 上测试过)

编辑(2020)

距离我最初的答案已经过去5年了，我认为这里的最佳实践是用复选框替换下拉框。想想看，这就是为什么复选框存在的主要原因，它能很好地适用于像 IE 和现代移动设备这样的老浏览器，而不需要任何自定义的 JS 来处理所有古怪的场景。

小开

巫师。
没有使用 jQuery 的选定答案。
另外，当单击一个选项时，它错过了设置焦点，因为如果您编写 e.proventDefault，则必须自己来设置焦点..。
忘记做焦点会影响 CSS 样式，例如 bootstrap 等。

var options = [].slice.call(document.querySelectorAll("option"));


options.forEach(function (element)
{
// console.log("element", element);
element.addEventListener("mousedown",
function (e)
{
e.preventDefault();
element.parentElement.focus();
this.selected = !this.selected;
return false;
}
, false
);
});

提交答案