How to "turn off" jQuery Mobile's styling of <select> drop downs?

Question

I need to turn off jQuery Mobile's styling of <select> drop downs. Ultimately I'd like the device itself (iPhone, Android, Blackberry, etc.) to determine how the <select> drop down looks.

Currently my markup is (option quantity reduced for display purposes):

<div data-role="fieldcontain">
    <label for="state">State:</label>
    <select name="state" id="state" data-role="none">
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="MN" selected="selected">Minnesota</option> 
        <option value="MS">Mississippi</option> 
    </select> 
</div>

I tried using data-role="none" on the <select> but nothing changed.

Is there a way to "turn off" jQuery Mobile for just the select drop down?

Solution 1

according to http://jquerymobile.com/test/docs/forms/docs-forms.html

If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>

Solution 2

Since Version 1.1 the right way to do it is: data-enhance="false"

You will also need to add this line to config:

$.mobile.ignoreContentEnabled = true;

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Solution 3

Inside mobileinit, fix the jQM selector to behave as expected:

$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';

Solution 4

Although this question is considered answered already, I'd like to add some more lines, since the answer didn't work "out-of-the-box" for me, and this might save some time for others.

In my case, I'm disabling the native dropdowns for a smartphone application when it runs into Android (since it has some ugly issues when opening native dropdowns, reported already in another thread). The "magic spell" that solved the problem to me is just the following lines:

$(document).bind('mobileinit',function(){
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        $("select").attr("data-native-menu","true");
    } else {
        $("select").attr("data-native-menu","false");
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
    }               
});  

These lines are in a customization script loaded just after jQuery and just before jQuery-Mobile. It's important to keep the order, otherwise the controls are already initialized and it has no effect!

I hope this advice can save some time to someone!

View more solutions

Comments

[Adrian Mester]

Did you manage to fix this somehow?

[slooooowdown]

This has been fixed in a more recent version. jquerymobile.com/test/docs/#/test/docs/forms/forms-selects.h‌​tml

[DwB]

You may be able to do this with the jQuery customization tool: jqueryui.com/download

[Jack]

Either way he is going to have to go into the CSS file to overwrite the select style, unless he doesn't want to overwrite any other JQuery UI customizations he may have made :-P

[slooooowdown]

Yeah, I figured it was much more involved than just fiddling with the CSS. I've found a couple of leads but nothing that has solved the issue as of yet. It appears that adding data-role="none" or data-native="true" to the select is supposed to remove the jQuery enhancement but so far, it hasn't worked for me. github.com/jquery/jquery-mobile/issues/issue/529 jquerymobile.com/test/#docs/forms/docs-forms.html

[slooooowdown]

This didn't work when I had originally posted my question but the jQuery Mobile team has since added it in.

[Charles Boyung]

This is not right for the question being asked. That attribute disables enhancement of children of the element you add it to, not the element itself.

[greg_diesel]

This solved a problem years later for me. iOS9 which just released in Sept 2015 caused my native iOS Jquery mobile select's to show but not be clickable. I used this in the header for my app to switch all the menus to using the jquery selects and the problem is solved. Thanks!

[Asbar]

Worked like a charm for me :)