如何避免在使用Javascript的多选框中单击Ctrl键？ [英] How to avoid the need for ctrl-click in a multi-select box using Javascript?

问题描述

我认为这将是一个简单的黑客，但我现在正在寻找几个小时，看不到找到正确的搜索字词。我想要有一个普通的多重选择框（< select multiple =multiple> ），除了我不希望用户不得不按住控制键进行多个选择。换句话说，我想要左键单击可以切换光标下面的< option> 元素，而不需要改变其他任何一个。换句话说，我想要的东西看起来像一个组合列表框，但行为像一组复选框。

有人可以建议一个简单的方式来做这个在Javascript ？谢谢。

解决方案

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

您基本上需要覆盖 mousedown < option> 的事件，并切换选定的属性。

  $（'option'）。mousedown（function（e）{
 e.preventDefault（）; 
 $（this）.prop 'selected'，！$（this）.prop（'selected'））; 
 return false; 
}）; 
  

为了简单起见，我给了选项作为上面的选择器。您可以调整它以匹配特定< select> 元素下的< option> s 。例如： $（'＃mymultiselect option'）

I thought this would be a simple hack, but I've now been searching for hours and can't seen to find the right search term. I want to have an ordinary multiple select box (<select multiple="multiple">) except I don't want the user to have to hold down the control key to make multiple selections.

In other words, I want a left click to toggle the <option> element that's under the cursor without changing any of the others. In other other words, I want something that looks like a combo list box but behaves like a group of check boxes.

Can anybody suggest a simple way to do this in Javascript? Thanks.

解决方案

Check this fiddle: http://jsfiddle.net/techfoobar/xQqbR/

You basically need to override the mousedown event for each <option> and toggle the selected property there.

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

For simplicity, I've given 'option' as the selector above. You can fine tune it to match <option>s under specific <select> element(s). For ex: $('#mymultiselect option')

这篇关于如何避免在使用Javascript的多选框中单击Ctrl键？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！