Chosen Order jQuery plugin demonstration

Example of usage for the jQuery version of Chosen Order. Handle selection order for Chosen dropdowns.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script src="http://labo.tristan-jahier.fr/chosen_order/chosen.order.jquery.min.js"></script>
<h1>The Chosenified multiple &lt;select&gt;</h1>
<p>
    <select name="fruits" class="chosen" multiple style="width: 500px;">
        <option value="banane">Banane</option>
        <option value="pomme">Pomme</option>
        <option value="poire">Poire</option>
        <option value="ananas" selected>Ananas</option>
        <option value="kiwi" selected>Kiwi</option>
        <option value="goyave">Goyave</option>
        <option value="abricot">Abricot</option>
        <option value="fraise" selected>Fraise</option>
        <option value="framboise">Framboise</option>
        <option value="avocat" selected>Avocat</option>
    </select>
</p>

<h2>Retrieving the order</h2>
<p>
    <button type="button" id="get-order">Retrieve selection in order</button>
    <br/>
    <ol id="order-list"></ol>
</p>

<h2>Setting (forcing) the order</h2>
<p>
    <input id="input-order" type="text" value="poire,  ananas, banane  ,kiwi " style="width: 300px;" />
    <button type="button" id="set-order">Force this selection in order</button>
</p>

CSS

* { font-family: arial; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }

JavaScript

$(document).ready(function() {
    // Chosenify every multiple select DOM elements with class 'chosen'
    $('select.chosen').chosen();

    // Get a reference to the DOM element
    var MY_SELECT = $('select[multiple].chosen').get(0);

    $('#get-order').click(function() {
        var selection = ChosenOrder.getSelectionOrder(MY_SELECT);

        $('#order-list').empty();
        $(selection).each(function(i) {
            $('#order-list').append("<li>" + selection[i] + "</li>");
        });
    });

    $('#set-order').click(function() {
        ChosenOrder.setSelectionOrder(MY_SELECT, $('#input-order').val().split(','), true);
    });
});