Multiple selectables, reset all others after any selection is made

Question

I am using more than one jquery-ui-selectable in a web page. I want the selected text value to be displayed in a text field. Basically i have designed a category structure where i have used accordion as a head and selectable as a sub-category.

I am able to display it in a text field, but the problem is when I want to select the item from another accordion the value of the item from previous accordion is appended in the text field. This is just because the item from previous accordion is still in selected state. I want to unselect it from previous accordion as soon as I click the item from next accordion.

Answer 1

If I got your question right, all you need is to implement a change handler.

Sample code could look like following:

$(".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(";")
        );
    }

});​

See it live in this FIDDLE.