JQuery Mobile 1.4.2 selectmenu().selectmenu('refresh') not working properly

Question

I have tried using the 2 codes below to refresh the selectmenu, but they didn't work.

$('#gender').selectmenu('refresh'); // not working
$('#gender').selectmenu('refresh',true); // not working

---

These 3 codes working, but the layout duplicated.

$('#gender').selectmenu(); 
$('#gender').selectmenu().selectmenu('refresh');
$('#gender').selectmenu().selectmenu('refresh', true);

original selectmenu:

after adding either one of the 3 codes above, it become:

Any ideas? Thanks.

Answer 1

This is because you are trying to apply the styling for second time which it causes problem.

To avoid that, add data-role="none" to your select element.

It should look something like this:

<select name="gender" id="gender" data-role="none">
    <option value="0">female</option>
    <option value="1">male</option>
</select>

Then, when you ready to apply styling, just apply it for once:

$('#gender').selectmenu(); 

This way, you shouldn't have duplicate layout problem.