user3212714
user3212714

Reputation: 33

jquery mobile select not refreshing widget

I'm stuck on this for a day now..main problem is, that I can't get the jqm widget for selectmenu to reflect the "selected" entry correctly.

I select the 2nd option, then reset..so it returns to 1st option. OK! it doesn't work a second time though. why not? the source code correctly states that 1st option is "selected", but its not displayed. it works again, after a page reload...

on top, if I use the selectmenu inside a jqm popup widget, it doesn't even work once. i assume both problems are connected.

function reset() {  
    $('#myselect option[value="1"]').attr("selected", true);
    //$('#myselect').selectmenu();
    $('#myselect').selectmenu('refresh');
}

<div class="ui-field-contain">
    <label for="myselect">Basic:</label>
    <select  name="select-native-1" id="myselect">
        <option value="1">The 1st Option</option>
        <option value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
        <option value="4">The 4th Option</option>
    </select>
</div>

<button onclick="reset();">Reset</button>

sample: https://jsfiddle.net/0v5f6m88/12/

thanks in advance!

Upvotes: 0

Views: 323

Answers (1)

Martina
Martina

Reputation: 769

This works for me:

function selectReset() {    
  $('#myselect').val("1");
    $('#myselect').selectmenu('refresh', true);
}

As to why your original code didn't work, it's something to do with how jquery mobile handles the selected values. If you look at the original select when you select a value, the option doesn't have 'selected' attribute on it. I guess it's something to do with that, not sure why it works the first time though.

Upvotes: 2

Related Questions