jQuery Forum

I was waiting on this to get through moderation so that I could attach a patch file, so here it is.

The point of the jQuery UI Selectable plugin is to make it easy to select multiple elements by dragging a lasso with your mouse. Clicking to select a single element isn't hard. So why use 270 lines when 3 will do?

1. $("#myList li").click(function() {
2.   $(this).addClass("selected").siblings().removeClass("selected");
3. });

demo: http://jsbin.com/enemi3

source: http://jsbin.com/enemi3/edit

Am I missing something?

Well, with one widget you can have both behaviors and you still have access to all the callbacks.

Ok, so you're implying that the selectable has a sole purpose of the whole lasso thing.  But you can also CTRL+Click to select many items and technically, you can select a single item.  It just doesn't prevent you from selecting ONLY a single item.  I'm not saying you should use the lasso effect to select a single item.  I'm just saying that I think the widget should support single select.  The code I added doesn't allow the lasso effect to work when multiple=false.

Well, I also think this is a good idea. I thought it was a matter of time that it was included in the selectable component.

I like this idea; I'm running into a challenge in which we would have 10 divs on a page that we want to be selectable, but we only want the user to select ONE option.  Maybe this jQuery plugin isn't the right tool (does anyone know what would be?)  but I looked at this plugin and it seems the closest match to what the requirements are.

So in our case, we'd have a grid of 10 divs and the user is supposed to select only one of them before proceeding, almost like choosing an option from radio buttons, but as stylized divs.

Well as mentioned above, there'll be keyboard support for jquery UI Selectable, and this ability isn't easily accessible by writing just 3 lines of code, I would like to make my ul single selectable and I would like to use keyboard navigation on it.

None of the different use cases and existing implementations that we are modeling this selectable refactor on allow at most one selection.

rdworth, this addition does not limit the selection to only one per se, but does allow you to limit the selection to only one if the use case for it is there. I for one would like to see support for this, and since it does not break existing code, remove features or alters features, I see no reason for not supporting it.

Also consider that it might even save users some extra code, when for example there is a template containing boilerplate script to present users with choices that can be selected. Using only a simple toggle, the same template can be presented for both ways of selecting items.

Oh, and as for existing implementations:
<select [multiple="multiple"]>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
</select>

The UI does (even) change using the multiple attribute, but it is the same code. And I think I can find many, many other examples where the same code and/or UI is used to support multiple *and* single selection.

BTW, the whole lasso thingy is more of a gimmick in my eyes than the preferred way to select multiple elements. Speaking of which, I can't SHIFT+Click to select a range of elements (like in Windows explorer, Gnome Nautilus, Text selection, HTML select multiple, etc.). But I digress...

Best regards,
Matthijs

This is a great idea and I support it.  It's OK that we can implement single select click rather easily without any framework support, but it's even better if the framework makes it a first class option.

I just checked out the code to find a possibility to have a "single select" in the selectable widget and found finally this thread. The possibility to have the option multiple true/false sound great and useful to me. I hope it finds his way into the framework widget.

I also wanted to say that I think adding an option for single/multiple selections is a great idea!  Please add it to the framework.

I think to have single-select option would be very useful, I was surprised it wasn't there...

@rdworth

@rdworth's simple solution isn't a solution at all! The selectable filter allows much more complicated selectees that a simple .siblings().removeClass('ui-selected') would NOT handle! For example, I am using:

I think the problem is then that the current Selectable component is incorrectly named/identified.

The behavior you're looking for is already possible with the current implementation of Selectable through the use of the selecting event like so:

The name Selectable suggests the simple property that one can select items. It doesn't imply any rules on anything else, like how many items there must be (selectable, as a term, might even refer to buttons or text), nor how many can be selected.

Here are a few examples why select one is usefull:

A website might have one page with multiple and another page single selection, using a single widget keeps the look and feel of uniformity.

There might be an option of a website giving a choice of one item or 2 items or more in a list, instead of writing code to implement diffrent list widgets, just changing a single property would make this clean.

The list goes on.

Better than a multiple, I suggest a select_limit numeric with 0 being infinate and 1 being a single, 2 for two items, etc.

If one item, the lasso should be disabled.

I can't believe this control is still limited to multiple selection only.  Reading through the comments, rdworth clearly should have named it lassoable, because right now it only implements half of what all other selectable list controls do.

Selectable is the wrong name for this component. It's a brilliant piece of code, but it should really have been termed a multiselectable or a lassoselectable, to specifically identify that it has one intended purpose that differs from the normal interpretation of Selectable.

1. All list widgets have the option to have a single or multiple selection.

selectable, single-select, with keyboard (up/dn):

I know this is a little old, but I implemented this framework and wanted to control the selectable to a single select and stop the lassoing of multiple selects.