jQuery Selectable only select 1 and get a value?
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 t开发者_Python百科o do this? For some reason these little things seem to not be all that easily findable in their API for it.
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);
});
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>
精彩评论