Making a Multiple Select Control Sortable_问答_开发者

Does anyone know how to make a multiple select (see below HTML) sortable? Using either jQuery or Ext JS? By sortable, I mean that I can drag an item (an option) up or down to reposition it in the select control.

<select id="testing" multiple=multiple>
    <option>First Option</option>
    <option>Second Option</option>
    <option>Third Option</option>
    <option>Forth Option</o开发者_StackOverflow社区ption>
    <option>5 Option</option>
    <option>6 Option</option>
    <option>7 Option</option>
</select>

✅✅ selectize/selectize.js

This can be attached to text (freetagging) as well as to select. I does have drag_drop and remove_button plugins.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<script>
$(function() {
    $('select').selectize({
      plugins: ['remove_button', 'drag_drop']
  });
});
</script><select multiple>
<option value ="1">One</option>
<option value ="2" selected>Two</option>
<option value ="3" selected>Three</option>
</select>

✅ jshjohnson/Choices

This can be attached to a select element and has an ordered option which then rewrites the order of the select options. So your selections are returned in the order you select them. Drag-and-drop is not possible though and will not be implemented.

Other libraries that show the order of selection in the UI but do not allow drag-and-drop nor seem to change the select accordingly

Dropdown | Semantic UI (1, 2)
jQuery Dropdown | Dane
Fastselect
Light Weight MultiSelect Test Page

Other select libraries that sort their options and do not respect ordering in the first place

tail.select
jQuery Pretty Dropdowns Demo
creativecirclemedia/dropdown-checkboxes
jQuery Selectric
Jquery.sumoselect by Hemant Negi

Unknown but unlikely

jQuery Selectpick
https://prevwong.github.io/awesome-select/
PebbleRoad/combo-select
zeusdeux/fuzzy-dropdown
ddSlick
Hierarchy Select jQuery Plugin for Twitter Bootstrap 4
BenMMcLean/BetterSelecter
bschueller/jquery.selectMe

You can't do it reliably with drag-and-drop. <select multiple> may be implemented using an OS select-list widget, which will not typically generate mouse events like the native HTML elements do.

You'd have to replace the <select> with a load of <div> analogues for it, which do provide sortability in the normal way whichever library/plugin you want to use for it does. It's a fair bit of bother to make an ersatz-<select> nicely accessible/usable/keyboardable though; most plugins don't really manage to fully.

The simpler alternative would be simply to have separate ‘Move up’/‘Move down’ buttons, which find and move the selected <option>s in the element.

jQuery UI has functions for making things sortable. See http://jqueryui.com/demos/sortable/.

I got the solution from internet after some study and search. Please try the following one -

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#move-up').click(moveUp);
        $('#move-down').click(moveDown);
    });

    function moveUp() {
        $('#selected-items select :selected').each(function(i, selected) {
            if (!$(this).prev().length) return false;
            $(this).insertBefore($(this).prev());
        });
        $('#selected-items select').focus().blur();
    }

    function moveDown() {
        $($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
            if (!$(this).next().length) return false;
            $(this).insertAfter($(this).next());
        });
        $('#selected-items select').focus().blur();
    }
    </script>
    </head>
    <body>
    <div id="selected">
        <div><strong>Selected</strong></div>
        <div id="selected-items">
            <select multiple="multiple" id="selected_fields" name="selected_fields[]">
                <option>one</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
            </select>
        </div>
    </div>

    <div id="priority">
        <div><input type="button" id="move-up" value="UP" /></div>
        <div><input type="button" id="move-down" value="DOWN" /></div>
    </div>
    </body>
    </html>