如何从一个knockout.js observableArray选择菜单选项？(How to get

我觉得我失去了一些东西很基本的，但我不能让一个下拉菜单，如我所料使用Knockout.js工作。

我有一组我想提出一个菜单对象，我需要找到所选择的选项，并张贴到服务器。我可以呈现的菜单，但似乎无法获取所选项目的值。我的视图模型看起来是这样的：

function ProjectFilterItem( name, id ) {
    this.Name = name;
    this.Id   = id;
}

function FilterViewModel() {
    this.projectFilters = ko.observableArray([
        new ProjectFilterItem( "foo", "1" ),
        new ProjectFilterItem( "bar", "2" ),
        new ProjectFilterItem( "baz", "3" )
    ]);
    this.selectedProject = ko.observable();
}

ko.applyBindings( new FilterViewModel() );

而我的观点的标记看起来是这样的：

<select 
    id        = "projectMenu"   
    name      = "projectMenu"
    data-bind = "
        options:        projectFilters,
        optionsText:    'Name', /* I have to enquote the value or I get a JS error */
        optionsValue:   'Id',   /* If I put 'selectedProject here, nothing is echoed in the span below */
        optionsCaption: '-- Select Project --'
    "
></select>

<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>

怎样才能把选定的菜单项在跨度显示，并张贴到服务器？（我假设我观察到的范围呈现的是一个同我会发布。）我需要另一个属性在ProjectFilterItem ，像this.selected = ko.observable(false); ？如果是这样，我怎么会宣称它作为价值的目标是什么？

你只需要通过使用value绑定到选定的值绑定：

从options文件：

注意：对于多选列表，设置该选项被选中，或选项选择阅读，使用selectedOptions结合 。对于单选择列表，也可以读取和写入使用值结合所选的选项。

在您的例子：

<select 
    id        = "projectMenu"   
    name      = "projectMenu"
    data-bind = "
        value: selectedProject,
        options:        projectFilters,
        optionsText:    'Name',
        optionsValue:   'Id',
        optionsCaption: '-- Select Project --'
    "
></select>

见演示。