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属性中，您可以使用该属性在其options数组中查找该值。试试这个：

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元素的选项集来查找它：< / p>

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

保存用户的选择选择框设置弹出WinJS

1 个答案: