Question

我有两个带有li的ol元素，我想允许在ol#gardien中只选择一个元素，并在ol#milieu几个元素中选择。我怎么能用jQuery做到这一点？

HTML：

<ol id="gardien" class="selectable ui-selectable">
<li class="ui-widget-content">Olivier</li>
<li class="ui-widget-content">Arnaud</li>
<li class="ui-widget-content">Rémy</li>
<li class="ui-widget-content">Willy</li>
</ol>

<ol id="milieu" class="selectable ui-selectable">
<li class="ui-widget-content">Alain</li>
<li class="ui-widget-content">Loic</li>
<li class="ui-widget-content">Benoît</li>
</ol>

Answer 1

您可以尝试使用selected事件，在这种情况下，您可以删除所选元素并选择新元素。

代码：

$(document).ready(function () {
    $("#milieu").selectable();

    $("#gardien").selectable({
        selected: function (event, ui) {
            $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
        }
    });
});

演示：http://jsfiddle.net/RwYxb/

Answer 2

我所做的是将两个我想要多选的东西和一个只有一个选择的东西分开。

多重选择：

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

只能进行一次选择（jquery中的默认行为）

$("#gardien" ).selectable();

使用jQuery selectable定义独占选择元素

2 个答案: