jQuery Selectable only select 1 and get a value?

Question

This might seem like an odd request but I'd like to use jQuery's Selectable tool to only select one item at a time and I'd like it to show me a value I'll have within each tag. At the very least I want the contents of that selection. Has anyone tried to do this? For some reason these little things seem to not be all that easily findable in their API for it.

Answer 1

A post from the jQuery Forum offers the following code to limit selection to a single item:

$("li").live("click", function(event) {
   $(this).siblings().removeClass("selected");
   $(this).addClass("selected");
});

As far as extracting data, here is the code that the jQuery UI team uses in the Serialize Demo, to extract data from each selected element:

    $("#selectable").selectable({
        stop: function(){
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function(){
                var index = $("#selectable li").index(this);
                result.append(" #" + (index + 1));
            });
        }
    });

And the HTML markup is:

<ol id="selectable"> 
 <li class="ui-widget-content">Item 1</li> 
 <li class="ui-widget-content">Item 2</li> 
 <li class="ui-widget-content">Item 3</li> 
 <li class="ui-widget-content">Item 4</li> 
 <li class="ui-widget-content">Item 5</li> 
 <li class="ui-widget-content">Item 6</li> 
</ol> 

Answer 2

If you only want one selection at a time, then why use selectable?

I would think you would just use jQuery, as it should be very easy. Or am I missing your point?

Live Example: http://jsfiddle.net/F7fsx/

HTML

<div id='container'>
    <div id='one'>one</div>
    <div id='two'>two</div>
    <div id='three'>three</div>
</div>
​

CSS

#container div {
    width: 50px;
    height: 50px;
    border: 2px dashed red;
    margin: 10px;
    color: white;
    background:orange;
}
​

jQuery

$('#container div').click(function() {
    $th = $(this);
    $th.css('backgroundColor','yellow');
    var value = $th.text()
    alert(value);
});​