Chosen Order jQuery plugin demonstration

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

by faissal_aboullait

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>
<p>
    <select name="fruits" class="chosen" multiple style="width: 400px;">
        <option value="banane">Banane</option>
        <option value="pomme">Pomme</option>
        <option value="poire">Poire</option>
        <option value="ananas">Ananas</option>
        <option value="kiwi">Kiwi</option>
        <option value="goyave">Goyave</option>
        <option value="abricot">Abricot</option>
        <option value="fraise">Fraise</option>
        <option value="framboise">Framboise</option>
        <option value="avocat">Avocat</option>
    </select>
</p>

<p>
    <select name="numbers" class="chosen" multiple style="width: 400px;">
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="four">Four</option>
    </select>
</p>

<p>
    <select name="states" class="chosen" multiple style="width: 400px;">
        <option value="france">France</option>
        <option value="maroc">Maroc</option>
        <option value="englend">Englend</option>
    </select>
</p>

JavaScript

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

    $('select.chosen').change(function() {
    		val1 = $("select[name^=fruits]").chosen().val();
    		val2 = $("select[name^=numbers]").chosen().val();
    		val3 = $("select[name^=states]").chosen().val();
    		values = $(".chosen").chosen().val();
    		alert(val1+' '+val2+' '+val3); 	       
    });
    

});