jQuery Mobile Select Menu Placeholder Options

If you use jQuery Mobile, you know that custom select menus are kinda shiesty to work with, so I’m going to explain the multiple ways to use the Placeholder Option and a hack to use the Placeholder Option without a label on a “long” list.

It’s common for developers to use the first ‹option› in a select menu to instruct the user the make a selection i.e. Please Select One. When a Placeholder Option is detected, jQuery Mobile will hide it in the menu list, showing only valid choices and displaying the Placeholder Option text as the header title (Please Select One).

To enable the Placeholder Option you need to include one of the following to your markup:

• An option with no value attribute
• An option with no text node
• An option with a data-placeholder=”true” attribute

For option lists with too many options to display on the devices screen viewport, jQuery Mobile will create a new “page” with all your options listed out and display them in a dialog pop-up. This allows the user to use the devices native scrolling to scroll up and down the long options list. The text inside the label is used as the title for this dialog pop-up.

What if I don’t want to use labels?

This is awesome and works great, but what if you don’t want to use labels due to device screen real estate? Aren’t placeholders meant to replace labels? If you don’t use a label, then your dialog pop-up with the long options list will not have a header title. To work around this, I included the label in the markup and gave it a class of select-label-hidden.

The markup looks like this:

<label for="select-menu" class="select-label-hidden">Please Select One</label>

The CSS looks like this:

label.select-label-hidden {
	display:none;	
}

By using display:none; the label element is still in the DOM, but not displaying on the screen and not taking up precious screen real estate. Because it’s still in the DOM, jQuery Mobile will find the label element and use it’s text as the title for the dialog pop-up.

Source: jquerymobile.com