Save user's choice Select box Settings Flyout WinJS

Question

How do I save the value the user selects from the select box in the Windows.Storage.ApplicationData?

<div class="win-settings-section">
  <h3>Test</h3>
  <select id="test">
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

I managed to get this to work by using a radio button instead of a select box. I did the following for the radio button:

(function () {
    "use strict";

    var applicationData = Windows.Storage.ApplicationData.current;
    var roamingSettings = applicationData.roamingSettings;

    WinJS.UI.Pages.define("/pages/preferences/preferences.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var oneRadio = document.getElementById("one"),
                twoRadio = document.getElementById("two"),
                selectElement = document.getElementById("test");

            // Set settings to existing values
            if (roamingSettings.values.size > 0) {
                if (roamingSettings.values["first_test"]) {
                    setValue();
                }
            }

            selectElement.addEventListener("change", function (evt) {
                var select = evt.target;
                if (select.selectedIndex >= 0) {
                    roamingSettings.values["test"] = select.options[select.selectedIndex].value;
                }
            });

            var selectedItem = roamingSettings.values["test"];
            select.selectedIndex = select.options.indexOf(selectedItem);

            // Wire up on change events for settings controls
            oneRadio.onchange = function () {
                roamingSettings.values["first_test"] = getValue();
            };
            twoRadio.onchange = function () {
                roamingSettings.values["first_test"] = getValue();
            };

            oneRadio.addEventListener("change", doTest, false);

            twoRadio.addEventListener("change", doTest, false);
        },

        unload: function () {
            // Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {
            // Respond to changes in viewState.
        }
    });

    function getValue() {
        var firstRadio= document.getElementsByName("first_test");
        for (var i = 0; i < firstRadio.length; i++) {
            if (firstRadio[i].checked) {
                return firstRadio[i].value;
            }
        }
    }

    function setValue() {
        var firstRadio = document.getElementsByName("first_test");
        for (var i = 0; i < firstRadio.length; i++) {
            if (firstRadio[i].value === roamingSettings.values["first_test"]) {
                firstRadio[i].checked = true;
            }
        }
    }
})();

I'm trying to follow the same procedure for the select box but I can't get it to work.

Answer 1

You want to use the select element's onchange event, in which you can get the value of the selected item and then save that. The selected index is in the element's selectedIndex property, which you can use to look up the value in its options array. Try this:

var selectElement = document.getElementById("test");    
selectElement.addEventListener("change", function (evt) {
    var select = evt.target;
    if (select.selectedIndex >= 0) {
        roamingSettings.values["test"] = select.options[select.selectedIndex].value;        
    }
});

To initialize the control, just do the reverse (inside the check for the existence of your settings, of course), but because you're saving a value you need to iterate through the select element's options collection to find it:

var selectedItem = roamingSettings.values["test"];
var options = selectElement.options;
var selectedIndex = null;

for (var i = 0; i < options.length; i++) {
    if (selectElement.options.item(i).value == selectedItem) {
        selectedIndex = i;
        break;
    }
}

if (null != selectedIndex) {
    selectElement.selectedIndex = selectedIndex;
}