Geek asks and answers

JQuery for mobile with multiple menu items?

I have several menu options in jQuery Mobile 1.1. I know that the default behavior is to display the selected items and number after selecting the item (s) and closing the menu.

My question is that I would prefer to always display the first item and the number of NOTs of the selected items. For example, if I have a menu:

<select name="color-choice" id="color-choice" data-mini="true" multiple="multiple" data-native-menu="false" >
   <option>Color Choices</option>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
</select>

And the user selects red and green colors, I want the selection menu to indicate "Select color (2)" instead of the standard "red, blue (2)".

This is to save space, since I have several menus and you want to do without labels, and ask the user to immediately see that the menu is a “color choice” and that they have moves 2.

Possible?

+3
1

, , , reset .

<select name="color-choice" id="color-choice" data-mini="true" multiple="multiple" data-native-menu="false" >
    <option value="" selected="selected">Color Choices</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>
<div>
    <input style="display:none;" id="hidden-choice" name="hidden-choice" value="" />        
</div>


$(document).ready(function(){

    $('#color-choice').change (function (e) { 
            hidden-choice.value = document.getElementById('color- choice').value;
            color-choice.value = "";
    });
});

, .

0

More articles: