多个可选项，在进行任何选择后重置所有其他选项

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。