How can I limit selecting options in multi select popup of jQuery mobile?

问题

    <select data-native-menu="true" id="food_type"  multiple="multiple" data-placeholder="Favourite food types" class="chzn-select-tag photo-status-update-tags"  multiple="" tabindex="-1">
                            <option data-placeholder='true' value="" disabled="disabled">Favourite food types</option>
                           <?php foreach($this->aFoods as $aFood):  ?>
                            <option value="<?php echo $aFood['food_name']; ?>" ><?php echo $aFood['food_name']; ?></option>
                           <?php endforeach; ?>
    </select>



jQuery('#food_type').on('change', function() {
if (this.selectedOptions.length <= 5) {
    jQuery(this).find(':selected').addClass('selected');
    jQuery(this).find(':not(:selected)').removeClass('selected');
} else {

    jQuery(this)
    .find(':selected:not(.selected)')
    .prop('selected', false);

}
});

Here is my code.I had limited the selected option to 5.Its working.But in multi select popup it is possible to select more than 5.My requirement is,if anyone tries to select more than 5 options, disable selection in multi select popup.I am using jquery mobile 1.2.1

回答1:

The issue is fixed now..I have changed the style of multi select popup by changing the <select> attribute 'data-native-menu="false"'. Just like below:

<select data-native-menu="false" id="food_type"  multiple="multiple" data-placeholder="Favourite food types" class="chzn-select-tag photo-status-update-tags"  multiple="" tabindex="-1">

来源：https://stackoverflow.com/questions/25524280/how-can-i-limit-selecting-options-in-multi-select-popup-of-jquery-mobile