如何在加载时设置条件 Select 菜单 - KnockoutJS

Question

我一直在研究一个两级的、有条件的 select 菜单，该菜单将根据第一级 selection 更改第二级选项。

条件部分工作正常，但我意识到我需要在加载时支持一个选项，因此两个 select 菜单都已填充。

我尝试设置 selectedLevelOne 和 selectedLevelTwo 可观察值的值，但这似乎不起作用。

我做错了什么？

这里有一个fiddle来说明： http://jsfiddle.net/mujaji/brwgetv1/1/

HTML

<div id="override-more">
<div class="form-group">
    <label class="control-label" for="leveOneSelect">Superhero/Villian</label>
    <select class="form-control" id="leveOneSelect" data-bind="options: levelOne, optionsCaption:'--Level 1--', optionsText: 'text', optionsValue: 'value', value: selectedLevelOne"></select>
</div>
<div class="form-group">
    <label class="control-label" for="levelTwoSelect">Superhero/Villian Name</label>
    <select class="form-control" id="levelTwoSelect" data-bind="options: levelTwo, optionsCaption:'--Level 2--', optionsText: 'text', optionsValue: 'value', value: selectedLevelTwo, enable: levelTwo().length">

    </select>
</div>

Javascript

function ViewModel(items) {
this.levelOne = ko.observableArray(items);
this.selectedLevelOne = ko.observable("Marvel Villian");
this.selectedLevelTwo = ko.observable("Galactus");

function getById(items, value) {
    if(!value) {
        return [];
    }

    var result = ko.utils.arrayFirst(items, function(item) {
        return item.value === value;
    });

    return result && result.childItems || [];
}

this.levelTwo = ko.computed(function(){
    var items = this.levelOne();
    var id = this.selectedLevelOne()
    return getById(items, id);
}, this);

}

var items = [
{text: "Marvel Superhero", value: "1", childItems: [
    {text: 'Captain America', value: '01'},
    {text: 'Ironman', value: '02'},
    {text: 'Wolverine', value: '03'},
    {text: 'Nightcrawler', value: '04'},
    {text: 'Spiderman', value: '05'},
    {text: 'Hulk', value: '06'},
    {text: 'Thor', value: '07'},
    {text: 'Hawkeye', value: '08'},
    {text: 'Silver Surfer', value: '09'},
    {text: 'The Thing', value: '10'},
    {text: 'Mr Fantastic', value: '11'}
]},
{text: "Marvel Villian", value: "2", childItems: [
    {text: 'Dr. Doom', value: '01'},
    {text: 'Magneto', value: '02'},
    {text: 'Juggernaut', value: '03'},
    {text: 'The Blob', value: '04'},
    {text: 'Galactus', value: '05'}
]},
{text: "DC Superhero", value: "3", childItems: [
    {text: 'Superman', value: '01'},
    {text: 'Batman', value: '02'},
    {text: 'Robin', value: '03'},
    {text: 'Wonder Woman', value: '04'},
    {text: 'Raven', value: '05'},
    {text: 'Aquaman', value: '06'}
]},
{text: "DC Villian", value: "4", childItems: [
    {text: 'Lex Luthor', value: '01'},
    {text: 'Joker', value: '02'},
    {text: 'Grundy', value: '03'},
    {text: 'The Riddler', value: '04'},
    {text: 'Lobo', value: '05'}
]}
];

var module = {};

module.sampleViewModel = new ViewModel(items);

ko.applyBindings(module.sampleViewModel, document.getElementById("override-more"));

Answer 1

您正在使用 "text" 值而不是绑定数组的 "value" 属性进行初始化，下面的更改应该可以修复它

this.selectedLevelOne = ko.observable("2");
this.selectedLevelTwo = ko.observable("05");

http://jsfiddle.net/brwgetv1/2/

如何在加载时设置条件 Select 菜单 - KnockoutJS

How to set Conditional Select Menu on Load - KnockoutJS

knockout.js

computed-observable