Can anyone suggest an alternative to select drop-down box with JQuery Mobile?

Question

I've built a JQuery Mobile based app, wrapped in AppMobi, released for both iOS and Android. To date I've heard of no major issues. Today I heard that a user with Android ICS is having repeatable crashes when accessing any drop down select boxes - I cannot reproduce the problem with my older test unit. I've had them try my raw html site as well - which does not yield the same behaviour, but the AppMobi guys seem to take a dim view on the use of JQuery Mobile so dont anticipate much help from that quarter.

My main alternative is likely going to be replacing the standard select drop down select boxes with some alternative.

Can anyone suggest an alternative (the simpler the better) that will yield the same functionality as the below code?

<select id="punits">
    <option value="in_H2O">in H2O</option>
    <option value="in_HG">in Hg</option>
    <option value="psi">psi</option>
    <option value="cm_H2O">cm H2O</option>
    <option value="cm_HG">cm Hg</option>
    <option value="kPa">kPa</option>
  </select>

Thanking you in advance

Answer 1

In order of the simpler the better - Here's a one line fix: Might I suggest using the jQuery Mobile built in custom select menu? Documentation @ http://view.jquerymobile.com/master/demos/selectmenu-custom

Basically use the same html but add this line to your mobileinit

$.mobile.selectmenu.prototype.options.nativeMenu = false;

This will yield all select menus being rendered by jQuery Mobile instead of the native controls

Answer 2

I made a quick and dirty example, it has no styling at this point, but something like this could work.

JsFiddle running example: http://jsfiddle.net/29vBZ/3/

You could replace the show() and hide() with slideDown() and slideUp() accordingly to create some kind of eyecandy, like i did here: http://jsfiddle.net/29vBZ/6/

HTML:

<div id="customSelect"> 
    <div id="customSelectCaption"></div>
    <div class="customSelectItem" identifier="in_H2O">in H2O</div> 
    <div class="customSelectItem" identifier="in_HG">in Hg</div> 
    <div class="customSelectItem" identifier="psi">psi</div> 
    <div class="customSelectItem" identifier="cm_H2O">cm H2O</div> 
    <div class="customSelectItem" identifier="cm_HG">cm Hg</div> 
    <div class="customSelectItem" identifier="kPa">kPa</div> 
</div> 

JavaScript/jQuery:

$(document).ready(function(){
//hide the options on load
$('#customSelect').children('.customSelectItem').hide();

//give it the caption of the first option as default.
var firstChild = $('#customSelect .customSelectItem');
$('#customSelect').attr('identifier', firstChild.attr('identifier'));
$('#customSelectCaption').html(firstChild.html());

//set a variable so we know in which state it is.
$('#customSelect').data('customSelectState', false);

//bind the click event so you can take action on click.
$('#customSelect').click(function(event){
    if($('#customSelect').data('customSelectState') == false)
    {
        //hide the caption, show the items.
        $('#customSelectCaption').hide();
        $('.customSelectItem').show();

        //set the variable so we know the state is now 'open'.
        $('#customSelect').data('customSelectState', true);
    }
    else
    {
        //set the new identifier.
        $('#customSelect').attr('identifier', $(event.target).attr('identifier'));

        //set the new caption.
        var newCaption = $(event.target).html();
        $('#customSelectCaption').html(newCaption);

        //show the caption, hide the items.
        $('#customSelectCaption').show();
        $('.customSelectItem').hide();

        //set the variable so we know the state is now 'closed'.
        $('#customSelect').data('customSelectState', false);
    }
});
});

To retreive the current value, you could simply do:

var currentSelection = $('#customSelect').attr('identifier');

Ofcource this only works for only one "fake" dropdown list, but could be expanded to a full jQuery plugin which does the same for multiple. I hope this is helping you in some way.

Answer 3

I ended up using the new (1.2) JQuery Mobile popup feature (http://jquerymobile.com/demos/1.2.0/docs/pages/popup/), with stacked radio buttons. A bit more complex than a simple drop down select menu, but works just fine on both IOS and Android