Question

I am trying to create and android app using jquerymobile and cordova 2.0.0. I am planning to add localStorage which will save settings of app to android storage. Right now I am trying to force my jquerymobile select menus to show the currently saved value.

Example:
Imagine that you have a menu (settings) consisting of 3 items (disabled, enable, compatibility mode) and you chose compatibility mode and save settings. Then variable settings is stored and set to compatibility. But when you load the settings next time it will looks like menu (settings) is set to disabled because it is the first option in list. So I want my program to display currently selected and saved option in settings. I have tried it by using body onload calling load() function which would set selectedIndex from stored value but it didnt worked (maybe my bad code).

So I need my javascript to construct select menu and change the order of options but it is not working.

Here is my HTML code:

<div data-role="content" data-theme="c" id="content">
        <div data-role="fieldcontain" onLoad="load();">
            <label for="transitions" class="select">Prechody:</label>
                <select name="transitions" id="transitions">

                </select>
        </div>      
        <div data-role="fieldcontain">
            <label for="entriesNumber">Počet zobrazovaných príspevkov:</label>
            <input type="range" name="entriesNumber" id="entriesNumber" value="25" min="0" max="35"  />
        </div>
</div>

and here is javascript:

function load(){
var select = document.getElementById("transitions");
var option1 = document.createElement("option");
option1.setAttribute("value","vypnute");
option1.innerHTML("Vypnúť");
select.appendChild(option1);
var option2 = document.createElement("option");
option2.setAttribute("value","zapnute");
option2.innerHTML("Zapnúť");
select.appendChild(option2);
var option3 = document.createElement("option");
option3.setAttribute("value","kompatibilita");
option3.innerHTML("Zapnúť v režime kompatibility");
select.appendChild(option3);
}

If you know how to do this by using selectedIndex (http://www.w3schools.com/jsref/prop_select_selectedindex.asp) or by any other more clear way please post it here. If not then please try to check my JS code so it would work.

Answer 1

I figured it out. Just needed to use this code:

document.getElementById("selection").selectedIndex = 2/*selected value*/; 
$("#selection").selectmenu('refresh');

Also if you are using jquerymobile slider (range) than you can use this code to update its value:

$('#slider').val(updatedValue).slider('refresh');