Example 13: (Open the Dev Console and check the Network)

This example show you how to:

  • Load the plugin
  • Add multiple mSelect's on the same page
  • Load mSelect data only when open it



HTML :
<select id="country_id" class="mSelect" multiple="multiple"></select>
<select id="state_id" class="mSelect" multiple="multiple"></select>
<select id="city_id" class="mSelect" multiple="multiple"></select>
JS :
$(function () {
    $('#country_id').mSelect({
        url: 'ajax/example11.php?q=countries', //load the contry mSelect
        loadWhenOpen: true //load the data only when open the mSeelect
    });

    $('#state_id').mSelect({
        url: 'ajax/example11.php?q=states', //load the states mSelect
        loadWhenOpen: true 
    });

    $('#city_id').mSelect({
        url: 'ajax/example11.php?q=cities', //load the cities mSelect
        loadWhenOpen: true
    });
});