如何从knockout.js observableArray中获取所选菜单选项? [英] How to get selected menu option from a knockout.js observableArray?
问题描述
我有一组要在菜单中显示的对象,我需要找到所选的选项并将其发布到服务器。我可以让菜单渲染,但似乎无法获取所选项目的值。我的视图模型看起来像这样:
function ProjectFilterItem(name,id){
this.Name = name;
this.Id = id;
}
函数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',/ *我必须引用这个值,或者我得到一个JS错误* /
optionsValue:'Id',/ *如果我把'selectedProject'放在这里,以下* /
optionsCaption:' - 选择项目 - '
>< / select>
< b>所选项目:< / b> < span data-bind =text:selectedProject>< / span>
如何将选定的菜单项显示在span中,并发布到服务器? (我假设我在span中渲染的可见性与我发布的一样)。我需要在 ProjectFilterItem
中的另一个属性,像这个.selected = ko.observable(false);
?如果是这样,我如何将其声明为该值的目标?
您只需使用 值
绑定绑定所选值:
从 选项
文档:
注意:对于多选列表,要设置哪些选项是
,或者选择哪个的选项被选中,使用
selectedOptions绑定。对于单选列表,您还可以阅读
并使用值绑定写入选定的选项。
在你的例子中:
< select
id =projectMenu
name =projectMenu
data-bind =
value:selectedProject,
options:projectFilters,
optionsText:'Name',
optionsValue:'Id',
optionsCaption:' - 选择项目 - '
>< / select>
请参阅演示。
I feel like I'm missing something very basic, but I can't get a dropdown menu to work as I expect using Knockout.js.
I have a set of objects I want to present in a menu, and I need to find the selected option and post that to the server. I can get the menu to render, but can't seem to get the value of the selected item. My view model looks like this:
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() );
and my view markup looks like this:
<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>
How do get the selected menu item to display in the span, and to post to the server? (I assume the observable I render in the span is the same one I'd post.) Do I need another property in the ProjectFilterItem
, like this.selected = ko.observable(false);
? If so, how would I declare it as the target of the value?
You just need use with the value
binding to bind the selected value:
From the options
documentation:
Note: For a multi-select list, to set which of the options are selected, or to read which of the options are selected, use the selectedOptions binding. For a single-select list, you can also read and write the selected option using the value binding.
In your example:
<select
id = "projectMenu"
name = "projectMenu"
data-bind = "
value: selectedProject,
options: projectFilters,
optionsText: 'Name',
optionsValue: 'Id',
optionsCaption: '-- Select Project --'
"
></select>
See Demo.
这篇关于如何从knockout.js observableArray中获取所选菜单选项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!