load dynamic values in form elements in jquerymobile - jquery-mobile

Question

I have one page called index.html.I need to load some values at the time of showing page via jquery mobileevent .
Text and text area values added well.But the filpbox is not updating.Can anyone please to solve this ?
inxedx.html filp box coding
<label for="group_name" class="ui-hidden-accessible"></label>
<input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
<label for="group_desc" class="ui-hidden-accessible"></label>
<textarea name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<label for="group_published">Published</label>
<select name="group_published" id="group_published" data-role="slider" data-theme="b">
<option value="1" >Yes</option>
<option value="0" >No</option>
</select>
test.js
$('#pg_add-group').on('pageshow', function(event) {
$('input[id=group_name]').val('hello');
$('textarea[id=group_desc]').val('hello desc');
$('select[id=group_published]').selected = false;
$( ".input[id=group_name]" ).textinput( "refresh" );
$( ".textarea[id=group_desc]" ).textinput( "refresh" );
});

Answer 1

You forgot to enhance look of select box, it is done like this:
$('select[id=group_published]').selectmenu('refresh', true);
Read more about it here.
Update:
I didn't look carefully so I didn't so your question was about flipswitch slider.
Working example: http://jsfiddle.net/Gajotres/vds2U/75/
HTML:
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off" defaultSelected>Off</option>
<option value="on">On</option>
</select>
JavaScript:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#reset', function(){
$("#flip-1").val('off').slider('refresh');
});
});