Search code examples
jqueryjquery-mobile

Select menu style in jquery-mobile

I have a Problem with the style of a select menu.

I have one which following code and style:

<select id="anredeMenu" data-native-menu="false" data-inline="true">
        <option value="1">Firma</option>
        <option value="2">Familienbetrieb</option>
        <option value="3">Herr</option>
        <option value="4">Frau</option>
        <option value="5">Familie</option>
</select>

And I have another one:

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

The code is nearly the same. Only different is: data-native-menu="false" data-inline="true" I want the style from the first example in all select menu´s.

I include the standard css from jquery mobile and I include the iPhone-style in my side.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="style.css" />  //from http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
Solution

  • You can bind to the pagebeforecreate event and add the data- attributes you want to all the <select> elements in the page:

    $(document).on("pagebeforecreate", function(e) {
    $("select", e.target).attr({
        "data-native-menu": "false",
        "data-inline": "true"
    });
});

    Since this handler runs before jQuery Mobile applies widgets to the elements in the page, it will behave as if all the <select> elements were properly configured from the start.