PhoneGap iOS UIPicker equivalent element: select an option value programmatically

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()">
  开发者_JAVA技巧  <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.

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.