保存用户的选择 选择框 Settings 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

您想使用 select 元素的 onchange 事件，在该事件中您可以获取所选项目的值，然后将其保存。所选索引位于元素的 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;        
    }
});

要初始化控件，只需执行相反的操作（当然是在检查设置是否存在），但是因为您要保存一个值，所以您需要遍历选择元素的选项集合以找到它：

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