jquery mobile - change flip switch default state

Question

I'm using jQuery mobile's flip switch and by default the switches are off. I can't figure out how to set the default value to 'ON'

<form id="sound-switch">
        <select name="flip-3" id="snd-switch" data-role="flipswitch" data-mini="true">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</form>

I read somewhere to add value="on" to the html but I can't get it to work. Does anyone have any experience with this?

Answer 1

Try

Added selected="selected" to On so that it is selected when it page loads.

By default always first option is selected

<option selceted="selected" value="on">On</option>

Fiddle Demo

<form id="sound-switch">
    <select name="flip-3" id="snd-switch" data-role="flipswitch" data-mini="true">
        <option value="off">Off</option>
        <option selected="selected" value="on">On</option>
    </select>
</form>

---

Check here http://validator.w3.org/check

SELECTED is not a member of a group specified for any attribute

using SELECTED will work but not pass w3 says invalid :)

use selected="selected"

Answer 2

Use .val() to set the Flipswitch's value and then re-enhance it .flipswitch("refresh").

$("#snd-switch").val("on").flipswitch("refresh");

Demo

Answer 3

Default value would be the first option for some reasons. You should go the option of 'ON' first, or just set as 'SELECTED' as like the following;

<form id="sound-switch">
    <select name="flip-3" id="snd-switch" data-role="flipswitch" data-mini="true">
    <option value="off">Off</option>
    <option selected value="on">On</option>
    </select>
</form>