Select list items on page load with JQuery UI Selectable

Question

I am trying to set up a list of of items that are selectable -and would like to have some of the list items already selected when the page loads. The user needs to be able to select multiple items (got this part working) but needs to be able to unselect the preselected items in the list ...as if the user had originally clicked on them to select them. Thanks for any advice you can give-

Javascript:

$(function() {
    $("#selectable").bind("mousedown", function(e) {       //acts as if the control key is pressed so that more than one item can be selected
    e.metaKey = true;
    }).selectable();
});

Style:

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;}
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

HTML

<ol id="selectable" >
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>     
    <li class="ui-widget-content" value="SU125AM">12:30</li>
    <li class="ui-widget-content" value="SU1AM">1:00</li>
    <li class="ui-widget-content" value="SU15AM">1:30</li>
    <li class="ui-widget-content" value="SU2AM">2:00</li>
    <li class="ui-widget-content" value="SU25AM">2:30</li>
    <li class="ui-widget-content" value="SU3AM">3:00</li>
</ol>

My plan is to pass the data in from the last time they visited the page with a list of the values that were selected. So after these are selected, the values are posted with ajax to save them for the next page visit. (I didn't include the posting part because that is working okay.) — Matt Ellis, Aug 29 '13 at 21:57
Found the answer in this post: http://stackoverflow.com/questions/861589/jquery-selectable-how-to-make-items-selected-at-1st-load — Matt Ellis, Sep 03 '13 at 17:45

Michał Szałapski · Answer 1 · 2013-08-29T22:11:14.930

<html lang="en">
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
jQuery(function() {
    $(".ui-widget-content").bind("mousedown", function(e) {
    var element = $(e.target);
    if (element.hasClass('selected')) {
        element.removeClass( "selected" );
    }
    else{
    element.addClass( "selected" );
    }
    });
});


</script>
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;}
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
.selected { background: #0014FF; }
</style>
</head>
<body>
<ol id="selectable" >
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>     
    <li class="ui-widget-content" value="SU125AM">12:30</li>
    <li class="ui-widget-content" value="SU1AM">1:00</li>
    <li class="ui-widget-content" value="SU15AM">1:30</li>
    <li class="ui-widget-content" value="SU2AM">2:00</li>
    <li class="ui-widget-content" value="SU25AM">2:30</li>
    <li class="ui-widget-content" value="SU3AM">3:00</li>
</ol>


</body>
</html>

try this code, i hope its help

Thanks Michal - how do I set which list item would be pre-selected on the load by your code? (Sorry, I am a noobie) — Matt Ellis, Aug 30 '13 at 13:33

Select list items on page load with JQuery UI Selectable

1 Answers1