Сохранить выбор пользователя Установите флажок Настройки Flyout WinJS

Question

Как сохранить значение, выбранное пользователем из поля выбора в 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>

Мне удалось заставить это работать с помощью переключателя вместо поля выбора. Я сделал следующее для переключателя:

(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;
            }
        }
    }
})();

Я пытаюсь выполнить ту же процедуру для поля выбора, но не могу заставить его работать.

Answer 1

Вы хотите использовать событие onchange элемента select, в котором вы можете получить значение выбранного элемента и затем сохранить его. Выбранный индекс находится в свойстве selectedIndex элемента, которое можно использовать для поиска значения в его массиве параметров. Попробуй это:

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;        
    }
});

Чтобы инициализировать элемент управления, просто сделайте обратное (конечно, внутри проверки на наличие ваших настроек), но поскольку вы сохраняете значение, вам нужно перебрать коллекцию опций элемента select, чтобы найти его:

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;
}