【问题标题】: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 的所有功能。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-05
  • 2013-05-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多