3

I have a select multiple menu in Jquery Mobile 1.1. I know the default behavior is to show the item(s) selected and the number once you select items(s) and close the menu.

My question is that I would rather always display the first item and the number NOT 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 chooses red and green, I want the close menu to read "Color Choices (2)" instead of the default "Red, Blue (2)".

This is to save space, as I have a few menus and would like to dispense with labels, and have the user tell at a glance that a menu is "color choices" and that they have choses 2.

Possible?

2
  • 1
    There is no option for this, but hacking this into JQM shouldn't be hard. Check the selectmenu plugin, see how plugin options are defined, set your own option (best data-attributable) and in build function, find the text display. instead of displaying the text, check for your new option. if option is defined, use it, otherwise default JQM.
    – frequent
    May 3, 2012 at 20:37
  • @Steve, I know this is old, but I am using jQuery Mobile 1.4.5. Have there been any changes that would allow this, or does anyone have an example of how to do this?
    – scuba88
    Jan 8, 2016 at 21:29

1 Answer 1

0

Add a function that will save the selected item when the option is selected, then reset to the default option.

<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 = "";
    });
});

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.