I'm trying to get jQuery UI default sortable to work on options in a select multi list box but can't seem to get it working. Can this work with a select option? I've only seen examples with <li> everywhere.

Here's my JavaScript:

$(function() {
    $( "#secondSelectms2side__dx" ).sortable();
    $( "#secondSelectms2side__dx" ).disableSelection();
});

And the HTML:

<select title="" name="secondSelectms2side__dx" id="secondSelectms2side__dx" size="8" multiple="multiple">
    <option value="4">asdsdsds</option>
    <option value="10">bsdsdsdsd</option>
    <option value="2">csdsdsds</option>
</select>​

My code is on jsFiddle:

/

I'm trying to get jQuery UI default sortable to work on options in a select multi list box but can't seem to get it working. Can this work with a select option? I've only seen examples with <li> everywhere.

Here's my JavaScript:

$(function() {
    $( "#secondSelectms2side__dx" ).sortable();
    $( "#secondSelectms2side__dx" ).disableSelection();
});

And the HTML:

<select title="" name="secondSelectms2side__dx" id="secondSelectms2side__dx" size="8" multiple="multiple">
    <option value="4">asdsdsds</option>
    <option value="10">bsdsdsdsd</option>
    <option value="2">csdsdsds</option>
</select>​

My code is on jsFiddle:

http://jsfiddle/noscirre/DRUPe/

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable

• I've never tried it, but I'm pretty sure you can't to this on a select element. You could however, use jQuery to break the options out into an ul / li arrangement, then multiselect + sortable them there. – Ben Everard Commented Jun 21, 2012 at 8:48
• @user1038814 I can give you a working demo with multiselect which is sortable in select box you keen I have demo ready for you? – Tats_innit Commented Jun 21, 2012 at 8:57
• @Tats_innit Yes please, that would be brilliant. Thanks – user1038814 Commented Jun 21, 2012 at 9:02
• @user1038814 cool gimme 2 mins, see ya soon! – Tats_innit Commented Jun 21, 2012 at 9:04

2 Answers 2

Workind demo for select options sorting using multiselect js widget: http://jsfiddle/QRv6d/9/

good link: https://github./yanickrochon/jquery.uix.multiselect http://quasipartikel.at/2009/05/10/jqueryui-multiselect/ & http://quasipartikel.at/multiselect/

please note: I cannot find any simple sortable implementation of sortable() with select boxes hence using this multiselect plugin and as you can see in demo it does work :) you can use it according to your need. full HTML is in js fiddle.

Hope this helps,

script source

  <script type="text/javascript" src="http://quasipartikel.at/multiselect/js/ui.multiselect.js"></script>

code

  $(function(){

            $(".multiselect").multiselect();

        });​

HTML

<select id="countries" class="multiselect" multiple="multiple">

    <option value="AUT" selected="selected">Austria</option>
    <option value="DEU" selected="selected">Germany</option>

    <option value="NLD" selected="selected">Netherlands</option>

    <option value="USA" selected="selected">United States</option>


  </select>

Image

This is what you need. You'll have to do some extra work if you want to customize the stlying to 'look' like a traditional select box. I'm integrating this with simple_form and will post the code here.

https://github./thgreasi/ui-sortable-multiselection