JqueryUI Selected - Deselect without Ctrl

Question

I am trying to make a select list indented by parent / child / grandchild. See below:

http://jsfiddle.net/Lmsop4k7/

$('#theParentList').selectable({ filter: 'li div', selected: function (event, ui) { var selectedText = $(ui.selected).text(); $("#selectedNode").text(selectedText); if ($(ui.selected).hasClass('selectedfilter')) { $(ui.selected).removeClass('selectedfilter'); } } }); 

But I have many problems related to the "unselect" functionality (that is, without pressing the Ctrl key). I also don’t want to “snap” Ctrl automatically to the mouse down (as described in some other solutions), b / c I only need one element selected at a time. In addition, I just want to understand how to make a control flow to deselect events (for example, "selected:").

What am I doing wrong here? As you can see, the selection is selected correctly, since the text field is updated correctly with the correct text. However, when I click on an already pressed item to “deselect” (without holding Ctrl), it does not deselect. I believe that even in this situation, the "selected" event fires - but, obviously, something is wrong with my "selected:" code. Very upsetting ..

Thanks to everyone.

Answer 1

So I played a little with him and found what I needed. See below. Added debug text if this might be useful to someone later. I will create another thread for my "side question" regarding indentation. Thanks to everyone.

http://jsfiddle.net/bgfn3091/2/

  $('#theParentList').selectable({ filter: 'li div', selected: function (event, ui) { var selectedText = $(ui.selected).text(); $("#selectedNode").text(selectedText); $(ui.selected).removeClass('ui.selected'); $("#debugText").text("Selected"); if ($(ui.selected).hasClass('alreadySelected')) { // clicking to de-select $('#theParentList .alreadySelected').removeClass('alreadySelected'); $(ui.selected).removeClass('ui-selected'); $("#debugText").text("alreadySelected is present and removed"); } else // clicking to select { $('#theParentList .alreadySelected').removeClass('alreadySelected'); $(ui.selected).addClass('alreadySelected'); // add to just this element $("#debugText").text("alreadySelected added"); } } }); 

Answer 2

Try

 // utilize `dblclick` event to remove selected class $(".ui-selected").one("dblclick", function(e) { $(e.target).removeClass("ui-selected") }); 

http://jsfiddle.net/Lmsop4k7/3/

Answer 3

Here is my:

http://jsfiddle.net/carlcarl/Lmsop4k7/4/

You can drag select / unselect without pressing Ctrl .

When selecting / deselecting, if all the ones you have selected are selected earlier, set this action as unselection. If more than one is not selected previously, set this action as a selection.