how to flip toggle in jquery mobile

In this web programming tutorial we will learn that how we can use Filp Toggles in Jquery Mobile. Flip toggles or switches are common mobile user interface elements. They allow the user to toggle between two values (“on” and “off”, for example). The user can flip the toggle by either sliding the toggle back and forth or by tapping on the toggle. jQuery Mobile uses the select HTML form element to create flip toggles. Simply create a select element with two options, and apply the data-role="slider" attribute to it.

<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Checkboxes and Radio Buttons</h3>
<form id="myform" action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="slider-music">Ambient Music</label>
<select name="slider-music" id="slider-music" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>

<script>
$(document).ready(function() {
var mySlider = $("#slider-music");
// Disable a slider
mySlider.slider('disable');
// Enable a slider
mySlider.slider("enable");
// Manually flip a slider and update its UI state
// (just flipping it will not automatically update the UI)
mySlider[0].selectedIndex = 1;
mySlider.slider("refresh");
})
</script>