JQuery Dropdown list for mobile

I'm trying to make a dropdown selector using jquery. The selected option will set the date range for a chart which is rendered when the item is selcted.

This needs to work on a mobile phone via phonegap.

I have looked on JQuery UI, but there doesn't seem to be anything suitable I can use.

Is there anything you guys (and 开发者_如何学Pythongals) could recommend?

I would suggest you to go with a simple Select element and keep it as simple as possible. Since you have mentioned you will be using the selected value i would suggest you to do some thing like this.

<script type = text/javascript>
$(function(){
    $('#number').bind('change', function(){
        display();
    });
});

function display(){
    $('#display').html('');
    var number = $('#number');
    // now this variable stores the value you need you can use this !!
    $('#display').append( '<p>' number '</p>');
}

</script>


<form method="get"  name="datarange">
    <select id="number" name="value you need">
        <option value="select-value" selected="selected">Select A value</option>  
        <option value="atlanta"> 1 </option>
            .....
</select>
</form>
<div id="display" class="rss-box"></div>
</div>

If you are looking for something that functions similarly to a regular select element and is optimized for mobile applications, you should check out jQuery Mobile Select Menus. Using jQuery mobile with PhoneGap is a simple way to create a mobile application UI.

Hope this helps.

Try chosen : http://harvesthq.github.com/chosen/