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?

@TusharGupta's solution worked, thanks. I'm using 1.4.0 for the record. — rizzledon, Feb 15 '14 at 12:42
@TusharGupta `selected` works but `selected="selected"` doesn't work. http://jsfiddle.net/Palestinian/x2dw2/ — Omar, Feb 15 '14 at 12:48
@TusharGupta They're both working for me, could it be a browser issue? I tried FF and Safari. — rizzledon, Feb 15 '14 at 12:52

score 10 · Answer 1 · answered Feb 15 '14 at 12:43

10

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

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

Demo

answered Feb 15 '14 at 12:43

Omar

32,302
9
69
112

1

Do you think it's wiser using this method over setting it in the html? – rizzledon Feb 15 '14 at 12:47
4

@rizzledon HTML is definitely wiser. Use this when you want to set it dynamically. – Omar Feb 15 '14 at 12:49
2

Thanks. I was wondering why setting value on the select wasn't working. Was missing the flipswitch call. – Eric Tarasoff Jun 04 '14 at 18:41
finally the answer I was searching for a long time - thank you! – Marcel Aug 16 '15 at 19:17

score 2 · Answer 2 · answered Feb 15 '14 at 12:45

2

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>

answered Feb 15 '14 at 12:45

Kabkee

198
2
11

This is a better solution than mine +1. – Omar Feb 15 '14 at 12:48

Tushar Gupta - curioustushar · Accepted Answer · 2014-02-15T15:47:16.200

2

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"

edited Feb 15 '14 at 15:47

answered Feb 15 '14 at 12:54

Tushar Gupta - curioustushar

58,085
24
103
107

there is a typo _selceted=_ in your first comment, i copied it as is. yup, `selected="selected"` does work. +1 – Omar Feb 15 '14 at 14:45

jquery mobile - change flip switch default state

3 Answers3

Linked