data-native-menu =“ true”在jQuery Mobile的多选中不起作用

Question

I want to have the native behavior when using mobile with the multiselect button. Desktop can use the normal behavior ( data-native-menu="false" ).

But when using the data-native-menu="true" it just works when disabling jquery mobile with data-role="none" .

I am using the chrome browser, also tested with android and windows phone, both with the same error.

Please, find the fiddler: https://jsfiddle.net/titombo/uxamfLLf/

How to workaround this problem ?

Possible Workaround :

1. Wrap around the select with a div with data-role="content" , I was getting error because it was inside a data-role="fieldcontain" , so everything will be styled as jquery mobile and it will work with the native mobile selects.

Example: https://jsfiddle.net/titombo/v5DC3/331/

Caution : In browser's it doesn't work.

2. For working with Desktop and Mobile I would add the attributes for data-native-menu="false" by checking if is a Desktop browser with jQuery and would not add anything if is a mobile. Or in my case that I am using ASP.Net MVC I check with:

3. for using the placeholder I made like this on the initial call:

   $('select span').first().text('Please, select element')

   if (!Request.Browser.IsMobileDevice)

Answer 1

If you look at the jQM docs it clearly states:

Currently jQuery Mobile only supports the multiple attribute on a select with nativeMenu set to false.

http://api.jquerymobile.com/selectmenu/