Question

I make use of Mobiscroll jQuery script for a prettier input by the users. On page load, the first option of the select list is shown as selected. What should I add to the existing code that on page entrance, the (for example) 3rd value is shown as the default?

I tried selecte="selected" but it does not work.

this is the jQuery script

$(function(){
    $('#city').scroller({
        preset: 'select',
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
    });
});

and here is the options of the select box

<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>

Answer 1

You can easily set the value from jQuery by doing this:

var defaultValue = 3;
$("#city").val(defaultValue);​

“3” here represents Boston from your drop down list, here’s a fiddle for proof:

http://jsfiddle.net/6mj8n/5/