Jquery Ui: Selectable - possible to select two list items with one click?

Question

I am using Jquery Ui: selectable on a list and am trying to figure out how to select two list elements with one click. I want it so that when a list item is clicked/selected, the next item in the list also gets selected.

ASPX page:

<button id="joinButton" type="button" class="collapsible inactiveSequenceTitle">
    <span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">
    &nbsp
    </span>Join Sections
</button>
<div id="joinBox" class="panel-collapse collapse">
    <ul id="sortableJoin-1" style="width: 98%; margin: auto;"></ul>

    <div id="saveJoin">
        <button type="button" class="btn btn-primary" id="join">
            <span class="fa fa-save">
            &nbsp
            </span>Join 
        </button>
    </div>
</div>

Jquery/Jvascript:

$("#sortableJoin-1").selectable({
    selected: function(event, ui) {
        var selected = $("li[class$='ui-selected']").length;
    }
    stop: function (e) {
        var last = $("li[class$='ui-selected']:last").index();
        $("li:eq(" + (last + 1) + ")").addClass("ui-selected");
    },
});

$('#sortableJoin-1').click(function() {
    $(this).addClass('no-hover');
})

matthias_h · Accepted Answer · 2020-06-23T13:40:36.937

You can select the next item of the selected item using the stop event which is triggered at the end of the select operation. Inside stop, get the index of the last element with the class ui-selected and add this class to the next element in the list.

$("#sortableJoin-1").selectable({
  selected: function(event, ui) {
    var selected = $("li[class$='ui-selected']").length;
  },
  stop: function(e) {
   var last = $("li[class$='ui-selected']:last").index();
   $("li:eq(" + (last + 1) + ")").addClass("ui-selected");
  }
});

 .ui-selected {
    background: red;
    color: white;
    font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
              integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
        
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<button id="joinSectionsButton" type="button" class="collapsible inactiveSequenceTitle"><span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">&nbsp;</span>Join Sections</button>
<div id="joinSectionsBox" class="panel-collapse collapse">
  <ul id="sortableJoin-1" style="width: 98%; margin: auto;">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>

  <div id="saveJoinSections">
    <button type="button" class="btn btn-primary" id="joinSections"><span class="fa fa-save">&nbsp;</span>Join Sections</button>
  </div>
</div>

Appreciate the answer. Unfortunately it didn't work. I've updated the code above accordingly. The "run code snippet" button wouldn't run either for some reason — NickyLarson, Jun 23 '20 at 16:35
@NickyLarson Strange that it's not working for you as it's working in the snippet above as well as in this Fiddle: https://jsfiddle.net/qgeazj4d/1/ — matthias_h, Jun 23 '20 at 16:49
My work firewall was blocking the code snippet from running. I see it does work. Must be something up with my code, I'll figure it out, thanks for your help — NickyLarson, Jun 24 '20 at 08:00
problem solved by changing it to this: $("#sortableJoin-1 li:eq(" + (last + 1) + ")").addClass("ui-selected"); — NickyLarson, Jun 25 '20 at 13:10

Jquery Ui: Selectable - possible to select two list items with one click?

1 Answers1