使用 jQuery UI Selectable 实现多选答案

【问题标题】：Implement multiple selects with jQuery UI Selectable使用 jQuery UI Selectable 实现多选
【发布时间】：2010-12-09 07:56:43
【问题描述】：

谁能帮我使用 jquery ui 可选库来执行以下功能：

允许用户通过单击鼠标选择多个项目
如果已通过鼠标单击选择项目，则取消选择该项目

【问题讨论】：

标签： jquery-ui jquery-ui-selectable

【解决方案1】：

这在another question 中得到了解决，但我在这里为任何通过谷歌找到它的人转发。如果你在 jQuery 中绑定“mousedown”事件并在那里设置 metaKey（就像用户拿着 ctrl/cmd 键一样），那么当你调用 selectable 时，它已经被设置了。

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();

【讨论】：

哇，只有一行代码，瞧！在发布这个问题之前，我使用 jquery-ui-selectable 标记搜索了所有问题。您有链接的另一个问题没有 jquery-ui-selectable 标记，所以我从未见过它。
@Jobst 所以你成功了吗？我无法让它工作。你需要调整什么吗？

【解决方案2】：

不使用 Selectable 但这将通过您已有的设置获得您想要的行为：

而不是

$( "#selectable" ).selectable()

试试

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});

【讨论】：

没有任何上下文，这不是真正的答案......只是对可选的被动攻击性咆哮 - 你至少可以提供一个完整的工作示例......只需要 2 分钟跨度>

【解决方案3】：

你检查过demo page for selectable吗？你已经可以这样做了。要选择多个项目，只需按住控制。这类似于您处理文件的方式。使用“Ctrl+Click”不够好吗？

演示代码在这里：

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>

<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div>

【讨论】：

我的要求是只用鼠标实现多选功能，不用键盘。
@user327066 - 如果我有时间，我会在午餐时看看它。我很确定它可以被修改为你想做的事情。
谢谢，我的意思是在我原来的评论中说，用户应该能够使用鼠标或键盘进行多项选择。因此，可以保留现有的键盘功能。我们只需要使用鼠标即可实现相同的多选功能。
好吧，那就在平板设备上试试吧。即使使用“jQuery UI Touch Punch”，您也无法在可选列表中选择多个项目（Apple 是新的 IE 吗？），但您可以使用 Eric 的建议选项。

【解决方案4】：

看看我在这个帖子上的回答。

jQuery UI selectable - making multiple select default

它包括可选 ui js 的完整代码替换以及概述所需的更改，使其成为可以传递的选项。

【讨论】：

【解决方案5】：

使用此代码可能对您没有帮助

  $('#selectable').bind("mousedown", function (e) {
      e.metaKey = true;    
 }).selectable('filter : td')

如果你在 td 的表上使用 selectable，则使用 selectable('filter : td')else

使用 selectable()

【讨论】：