javascript - knockout 设置下拉值

Question

我在layout.chtml中有一个使用knockout js的语言下拉菜单

 <select id="Language" class="styled-select" data-bind="value: Language,options: locale, value: selectedLocale, optionsText: 'name'"></select>


 var viewModel = this;

 viewModel.locale = [{ id: 1, name: 'English' }, { id: 2, name: 'Spanish' }];

 viewModel.selectedLocale = ko.observable(sessionStorage.culture);
 viewModel.selectedLocaleValue = ko.computed(function () {
     sessionStorage.culture = viewModel.selectedLocale() && viewModel.selectedLocale().id;
});

ko.applyBindings(viewModel);

运行应用程序时，我更改了下拉列表并选择西类牙语，然后当我单击提交按钮时，页面重新呈现，并再次使用默认英语重新设置区域性 session 值。

以下是解决该问题的可能方法。

1. 在重新渲染时进行一些调整并设置下拉列表选定的值，并应反射(reflect)在文化 session 中
2. 避免在登录后执行操作时重新渲染
3. 让 Ajax 调用帖子。

我尝试过选项1，但我不知道如何设置下拉列表中的选定值

Answer 1

您仅在 session 中存储所选区域设置的 id，但是您需要将整个区域设置对象存储在 selectedLocale 中以使下拉列表预定义选拔工作。

因此您需要通过id查找存储的区域设置:

var localeFromSession = ko.utils.arrayFirst(viewModel.locale, function(item) {
    return item.id == sessionStorage.culture;
});

并将其设置为selectedLocale:

viewModel.selectedLocale = ko.observable(localeFromSession);

作为替代解决方案，您还可以在绑定(bind)中设置 optionsValue: 'id'。在这种情况下，viewModel.selectedLocale 将仅包含 id 而不是整个对象。但是在这种情况下，您还需要更改保存代码，以及您希望选择完整区域设置对象的其他位置。