How to set value of select box in page before show in jquery mobile?

Question

How to set value of select box in page before show in jquery mobile. i have given normally as

document.getElementById('RA_IF_inpVisible').value = visible;

In page it is given as follows

<div data-role="fieldcontain">
     <label for="name">Visibility:</label>
     <select name="RA_IF_inpVisible" id="RA_IF_inpVisible">
            <option value="0">0</option>
            <option value="1">1</option>
     </select>
</div>
</fieldset>

If the variable is "1" also it is showing only "0" as default value.

Answer 1

You need to use .val() to set value and then refresh selectmenu to apply changes.

$(document).on("pagecontainerbeforeshow", function (e, data) {
  if ( data.toPage[0].id == "PageID" ) {
    $("#RA_IF_inpVisible", data.toPage).val(1).selectmenu("refresh");
  }
});

Demo

Answer 2

If i got it right, this should help you:

 var e = document.getElementById('RA_IF_inpVisible'); //Value is the Value of your Page, so you need to set it in some way ;) var value = 1; var i=0; for (i;i<e.options.length; i++){ if(e.options[i].value==value){ e.options[i].selected = true; } } e.style.visibility = "visible"; 

 <div data-role="fieldcontain"> <label for="name">Visibility:</label> <select name="RA_IF_inpVisible" id="RA_IF_inpVisible"> <option value="0">0</option> <option value="1">1</option> </select> </div> 

This Javascript should circle through all elements and compare your value which should be set to the values of the options. If they match, the options will be selected. Afterwards your select will be visible.