Question

Using PhoneGap, I have a element rendered as a UIPicker that contains 2 options.
So far I have failed to programmatically set the 2nd option as the selected one.

Here is how the code looks like(Javascript):

<select id="dropdown1" onchange"doSomething()">
    <option value="0">none</option>
    <option value="1">test</option>
</select>

• I have failed to select the 2nd option using ‘selectedIndex’ i.e

  $("select#dropdown1").selectedIndex = 1;

• I have also failed to select the 2nd option accessing the ‘selected’ attribute, i.e

  $("select#dropdown1 option")[1].attr("selected", "selected");

Now looking at the html generated from the 2 lines of code above, the innerHTML stands unchanged, the selected attribute does not appear. I do not know of a method to refresh the GUI.

Answer 1

You need to make sure to refresh the control in jQuery Mobile, so that the nice graphical display is updated to correspond to the underlying HTML tag. Try this (http://jsfiddle.net/NPC42/m4jMn/4/):

// remove current selection
$("select#dropdown1 option").removeAttr("selected");

// add selected, and then refresh the parent control to see result
$("select#dropdown1 option[value='1']").attr('selected', 'selected').parent().selectmenu("refresh");

This works for me.