jQuery UI 多选答案

【问题标题】：jQuery UI multiple selectionsjQuery UI 多选
【发布时间】：2009-05-25 23:31:42
【问题描述】：

查看来自 jquery ui 的 this demo 您必须按住 Ctrl 键才能进行多项选择我真的很喜欢这段代码，但我不想强迫我的访问者按 ctrl 键我希望代码允许在不按住 ctrl 键的情况下进行多项选择

这可能吗？

【问题讨论】：

您需要绘图框功能吗？如果没有，你可能会自己动手，我或其他人可以帮助编写代码。

标签： javascript jquery html jquery-ui

【解决方案1】：

我在 cmets 中问了你一个问题，但我只会写一个简单的选择解决方案，这样你就可以看到我在想什么。

所以基本上你可以使用 jquery toggle() 效果来滚动你自己的选择器。当用户单击时，您将添加橙色类，当他再次单击时，它将删除橙色类。

$(document).ready( function() {
    $('ul#selectable li').toggle( function() {
        $(this).addClass('orange'); }, function() {
        $(this).removeClass('orange'); } );
});

那么你所有的工作就是用橙色类抓取所有 li 元素并将它们发布到一个表单或任何你的最终目标。尚未检查此代码，但您所做的是要求 selectable 中所有在类属性末尾具有橙色值的 li 元素。

使用下面的代码，我正在创建一个新数组，然后将每个“橙色 li”的 text() 值添加到其中。

var theSelections = new Array();

$('ul#selectable li[class$="orange"]').each( function(i) {
    theSelections[i] = $(this).text();
});

【讨论】：

谢谢，这就是我要说的:)

【解决方案2】：

是的。但是，该实现必须允许在第二次单击时取消选择选定的项目。您只需稍微修改代码即可实现此目的。

对所有项目执行 .selectable('Enable')。

然后您需要对所有项目执行 .selectable('toggle') onClick。

这应该可以解决问题。

【讨论】：

来自文档：切换可选功能的状态。此方法根据当前状态启用或禁用选择。如果我没看错，您的解决方案基本上只会禁用 .selectable 的所有功能。