Select list items on page load with JQuery UI Selectable

Question

Select list items on page load with JQuery UI Selectable

1k views Asked by Matt Ellis At 29 August 2013 at 21:46

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>

Original Q&A

There are 1 answers

**Michał Szałapski** · Answer 1 · 2013-08-29 21:59:59

<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

TechQA.

Select list items on page load with JQuery UI Selectable

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in SELECTABLE

Related Questions in JQUERY-UI-SELECTABLE

Popular Questions

Popular Tags

Trending Questions