我有一个标准的select multiple HTML 输入字段，例如：
<select multiple="multiple" size="5" id="mysel" name="countries">
<option value="2">Afghanistan</option>
<option value="4">Aland</option>
</select>
由于这是一个多选，要选择多个值，您必须按住 CTRL 键并选择任何其他元素。但是我想要实现的是：
这个想法是避免必须按 CTRL 键并更改此输入字段的使用语义。元素只能通过单击（即切换选择状态）来选择和不选择。
我还不能实现这个。伪代码应该是这样的。
我应该如何实现这个？
【问题讨论】：
我来这里是为了解决我遇到的同样的问题。我修改了 user1106925 的解决方案，因为它不起作用（单击选择立即取消选择它）。 我的解决方案：
onclick = "this.selected ? this.selected = !this.selected;"
【讨论】：
另一个没有 JQuery 的变体：
var multiSelect = {};
function init() {
var s = document.getElementsByTagName('select');
for (var i = 0; i < s.length; i++) {
if (s[i].multiple) {
var n = s[i].name;
multiSelect[n] = [];
for (var j = 0; j < s[i].options.length; j++) {
multiSelect[n][j] = s[i].options[j].selected;
}
s[i].onclick = changeMultiSelect;
}
}
}
function changeMultiSelect() {
var n = this.name;
for (var i=0; i < this.options.length; i++) {
if (this.options[i].selected) {
multiSelect[n][i] = !multiSelect[n][i];
}
this.options[i].selected = multiSelect[n][i];
}
}
window.onload = init;
【讨论】：
你可以使用下面的sn-p来达到你想要的效果
$("select[multiple] option").mousedown(function(){
var $self = $(this);
if ($self.prop("selected"))
$self.prop("selected", false);
else
$self.prop("selected", true);
return false;
});
在旧版本的 jQuery 中，prop() 不可用：
$("select[multiple] option").mousedown(function(){
var $self = $(this);
if ($self.attr("selected"))
$self.attr("selected", "");
else
$self.attr("selected", "selected");
return false;
});
【讨论】：
$self.prop('selected', !$self.prop('selected'));会更简洁。
$self.prop('selected', function(i,old){!old});
this.selected = !this.selected 更短更快。
Javascript（不带 jquery）：
var select = document.getElementById('mysel');
select.addEventListener('mousedown', function(e){
var opt = e.target;
if (opt.selected){
opt.removeAttribute('selected');
opt.selected = false;
} else {
opt.setAttribute('selected', '');
opt.selected = true;
}
e.preventDefault();
});
我看到上面的大多数答案都是将事件与选项而不是选择绑定在一起。如果我的select有1000个选项，那么会绑定1000个事件，会不会影响性能？
因此我也决定不在选项中绑定我的事件。
【讨论】：
我刚刚尝试了此解决方案，但所选答案不适用于 Jquery 1.9.1
Oscar 的答案看起来好多了，但是它将属性与属性混合在一起，如果您选择、取消选择然后尝试再次选择，它将无法使用，因为它会将选择置于不可用状态
我找到了正确的答案如下
$("select[multiple] option").mousedown(function () {
if ($(this).prop("selected"))
$(this).prop("selected", false);
else
$(this).prop("selected", true);
return false; });
我希望这对其他人有帮助；）
【讨论】：
使用 jquery 1.9.1 的 javascript 代码是：
$("select[multiple] option").mousedown(function () {
var $self = $(this);
if ($self.prop("selected"))
$self.removeAttr("selected");
else
$self.attr("selected", "selected");
return false;
});
【讨论】：
新的 jQuery 版本可能会提供一些修复：
$("select[multiple] option").mousedown(function(){
var $self = $(this);
if ($self.attr("selected")){
$self.removeAttr("selected");
} else {
$self.attr("selected", "selected");
}
return false;
});
【讨论】：
您想更改选择多个输入字段的默认行为是对的。它们往往会对用户体验产生负面影响，因为目的没有明确传达，用户可能不了解如何正确使用它们。
重新调整多选框的用途也不正确。如果您正在考虑使用 select multiple，那么您可能需要重构您的设计。也许您可以使用复选框来代替？
这是一篇关于该主题的文章：http://www.ryancramer.com/journal/entries/select_multiple/
【讨论】：