Question

I’m working with JQuery mobile. I am building a form that includes the following code:

<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
  <option>Unspecified</option>
  <option value="-1">Unspecified</option>
  <option value="0">Male</option>
  <option value="1">Female</option>
</select>

A custom menu is shown here. Right now, when someone clicks the drop down, a dialog appears with multiple options. The dialog title says “Unspecified”. I know it says this because “Unspecified” is the first option. What I want is, the drop down to default to “Unspecified” and the dialog title to say “Please choose…”.

I can’t seem to figure out how to do this? I don’t see any properties that you can set to accomplish this. Then I thought about listening for the “tap” event, but I couldn’t seem to get that to work either.

Answer 1

Try This:

<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
  <option>Please choose...</option>
  <option value="-1" selected="selected">Unspecified</option>
  <option value="0">Male</option>
  <option value="1">Female</option>
</select>