保存用户的选择 选择框 设置浮出控件 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属性中，您可以使用该属性在其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元素的options集合来找到它:

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