jquery - 多个可选择项，在做出任何选择后重置所有其他项

Question

我在网页中使用了多个 jquery-ui-selectable。我希望选定的文本值显示在文本字段中。基本上我设计了一个类别结构，其中我使用手风琴作为头部并可选择作为子类别。

我可以在文本字段中显示它，但问题是当我想从另一个手风琴中选择项目时，前一个手风琴的项目的值会附加在文本字段中。这只是因为先前手风琴中的项目仍处于选中状态。一旦单击下一个手风琴中的项目，我想从上一个手风琴中取消选择它。

Answer 1

如果我的问题是正确的，那么您只需要实现一个更改处理程序。

示例代码可能如下所示：

$(".selectable").selectable({

    // change handler
    stop: function() {

        // reset all selected values in other selectables
        $('.selectable').not(this).find('li').removeClass('ui-selected');

        // print currently selected value(s)
        $('#result').val(
            $(".ui-selected").map(function() {
                return $(this).text();
            }).get().join(";")
        );
    }

});​

在这个FIDDLE中看到它。