0

我一直在研究一个两级的条件选择菜单，它将根据第一级选择更改第二级选项。

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

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

我究竟做错了什么？

这里有一个小提琴来说明：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"));
4

1 回答 1

2

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

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

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

于 2015-12-04T21:03:45.350 回答