如何使用Javascript避免在多选框中需要使用Ctrl键加点击？

9 浏览
0 Comments

如何使用Javascript避免在多选框中需要使用Ctrl键加点击？

我以为这只是一个简单的技巧，但我已经搜索了好几个小时，却找不到合适的搜索词。我想要一个普通的多选框（

需要注意的是，这种解决方法虽然可以解决问题，但无法使表单变为脏状态。对于“buggy behavior”的具体含义和“e.preventDefault()”的作用，请参考相关问题的解答。

另外，还有人提出了一种改进的方法，即当选项被包裹在optgroup中时，原始代码会失效。改进的方法是使用`el.closest('select').hasAttribute('multiple')`来代替`el.parentNode.hasAttribute('multiple')`。

0
0 Comments

问题的原因：在一个多选框中进行多选时，需要按住Ctrl键来选择多个选项，但是这种操作不够方便。

解决方法：可以将下拉框替换为复选框，这样就不需要使用Ctrl键来进行多选了。

以下是整理后的文章：

techfoobar的答案存在一个bug，如果你拖动鼠标，它会取消选择所有选项。

Sergio的答案很有意思，但是克隆并删除与下拉框绑定的事件不是一件好事。

尝试这个答案。

注意：在Firefox上不起作用，但在Safari/Chrome/Opera上完美运行（我没有在IE上测试过）。

编辑（2020）：

在我最初的回答5年后，我认为最佳实践是用复选框替换下拉框。想想看，这正是为什么复选框首次出现的主要原因，并且它可以很好地与旧浏览器（如IE）和现代移动设备配合使用，无需任何自定义JS来处理所有怪异的情况。

这个确实是最好的解决方法，点击时不会滚动到顶部。

0
0 Comments

如何避免使用Javascript中的ctrl-click来选择多个选项？

在一个多选框中，我们通常需要使用ctrl-click来选择多个选项。但是通过重写每个选项的mousedown事件，并在其中切换selected属性，我们可以避免使用ctrl-click来选择多个选项。

具体代码如下：

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

以上代码中，选择器选择了所有的option。你可以根据需要调整选择器以匹配特定select元素下的option元素，例如：`$('#mymultiselect option')`。

你也可以使用`this.selected`代替`$(this).prop('selected')`。

注意，这个代码依赖于jQuery，所以确保在DOM元素加载并准备好绑定事件时执行。可以将代码放在`$(document).ready(...)`中。

然而，这种解决方法在拖动鼠标时会取消选择所有选项，存在问题。为了解决这个问题，可以在代码中加入`option.parentElement.focus();`来手动设置焦点。

除了使用jQuery，也可以简化代码，只需使用`this.selected = !this.selected;`即可，没有必要使用jQuery。

需要注意的是，IE和FF对于在option元素上触发mousedown事件的支持非常有限。为了实现跨浏览器的支持，可以考虑构建一个自定义控件，使用一组样式化的复选框来代替原生的select元素。

此外，当select有滚动条时，会出现一个问题：它会跳到第一个选中的选项，这会导致闪烁。为了解决这个问题，需要在代码中添加`option.parentElement.focus();`，因为在写入`e.preventDefault()`时，这个不会被设置。

如果你的select框上有事件绑定，你可能需要将`$(this).attr('selected', !$(this).prop('selected')).change();`改为`$(this).attr('selected', !$(this).prop('selected')).change();`，以触发事件。

需要注意的是，这个解决方法会取消使用SHIFT键选择多个选项的功能。如果需要保留这个功能，可以对代码进行扩展。

通过重写mousedown事件并切换selected属性，可以避免使用ctrl-click来选择多个选项。但需要注意的是，这种解决方法在不同浏览器上的兼容性有限，可以考虑使用一组样式化的复选框来代替原生的select元素。

0