jQuery Mobile 1.1.1 Custom Select Menu - Placeholder Text not Visible

6
votes

After upgrading to jQuery Mobile 1.1.1 earlier today (7/13/2012) I noticed that all of my Custom Select menus no longer show the placeholder text on page load. Is there something I need to do differently in 1.1.1 to show the placeholder text in custom select menus? Help!?!?

Here's a sample of my code: 

<div data-role="fieldcontain" class="ui-hide-label no-field-separator">
      <label for="ceiling" class="select" data-theme="a">Ceiling</label>
       <select name="ceiling" id="ceiling" data-theme="a" data-native-menu="false" class="required">
            <option data-placeholder="true">Ceiling (Yes/No)</option>
            <option value="Yes">Ceiling: Yes</option>
            <option value="No">Ceiling: No</option>
      </select>
</div>

Sample image (the black bars are my custom select menus): enter image description here

1
jquery-mobileplaceholderselect-menu
Looks like a bug, submit issue here: github.com/jquery/jquery-mobile/issues/4696 – Phill Pafford
They should have a workaround for this and fixed in the maintenance release 1.1.2 – Phill Pafford
(I know this is probably a dumb question) Any idea when 1.1.2 will be released? Estimate? I'm releasing an app that is based on this and it would be nice if this was fixed pre-release. – adamdehaven
if you just need to fix you can download it here: jquerymobile.com/test/docs/forms/selects/custom.html or maybe just use the test jQM: jquerymobile.com/test/js/jquery.mobile.js until 1.1.2 is released – Phill Pafford
There is a patch, could you please confirm? github.com/jquery/jquery-mobile/issues/4696 – Phill Pafford

1 Answers

-2
votes

this code is working for me :

<select>
  <option value="" data-placeholder="true">Choose one:</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Just put value="" on your placeholder option