Select tag with data-native-menu=false fails to correctly render option tags with empty values

[andleer]

JSBin: http://jsbin.com/emoNutu/1/

<select data-native-menu="false">
    <option value="">has no value</option>
    <option value="1">has value</option>
    <option value="">has no value</option>
</select>

Displays the option tag with the empty value centered and un-selectable when it is the first item.

Tested on Desktop Chrome and IE10. Vanilla Android 4.3 Chrome. All behave the same. jQM 1.3.2 and 1.2.1

data-native-menu true or false should allow the same selections.

[gabrielschulhof]

You're right. A value of "" is still a value. Unfortunately, we've documented (look for "Placeholder options") that both an absent value attribute, as well as a present value attribute set to a falsy value will cause the custom select to consider the option a placeholder.

We've decided to deprecate this particular behaviour. As of 1.5.0, the presence of a value attribute will preclude the option from being rendered as a placeholder.

In the meantime, if you wish the custom select menu to have this behaviour, you should modify the library by hand:

1. Look for the line

   if ( needPlaceholder && ( !option.getAttribute( "value" ) || text.length === 0 || $option.jqmData( "placeholder" ) ) ) {

   in jquery.mobile.js. If you wish to make this change in the jQuery Mobile git repository, the line is located in the file js/widgets/forms/select.custom.js. You can then build a custom version of the repository with grunt.

2. Replace !option.getAttribute( "value" ) with option.getAttribute( "value" ) == null

[andleer]

Actually this seems to solve my issue. Thanks for the quick response.

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;