Implement multiple selects with jQuery UI Selectab

问题:

can anyone help me use the jquery ui selectable library to perform the following functions:

• Allow a user to select multiple items with a mouse click
• De-select an item if it is already selected with a mouse click

回答1:

This is worked around in another question, but I'm reposting here for anyone who finds this via google. If you bind the "mousedown" event in jQuery and set metaKey there (as if the user is holding the ctrl/cmd key), then when you call selectable, it will already be set.

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();

回答2:

Doesn't use Selectable but this will get you the behavior you want with the setup you already have:

instead of

$( "#selectable" ).selectable()

try

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});

回答3:

Have you checked the demo page for selectable? You can already do this. To select multiple items, just hold control. This is similar to how you would work with files. Is using "Ctrl+Click" not good enough?

Demo Code Here:

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>

<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div>

回答4:

Take a look at my answer on this thread.

jQuery UI selectable - making multiple select default

It includes the full code replacement for the selectable ui js as well as outlining the changes needed, making this an option that can be passed.

回答5:

use this code may be ot helps you

  $('#selectable').bind("mousedown", function (e) {
      e.metaKey = true;    
 }).selectable('filter : td')​

if you are using the selectable on table for td's the use selectable('filter : td')​ else

use selectable()​