如何选择更改后仅显示在下拉列表中的选项
how to choose options what will only display in a dropdown upon change
在更改类别时,如何选择下拉列表中可见的选项元素?
让我用代码给你看,以便进一步解释。
var Foo = function () {
var self = this;
self.id = ko.observable();
self.types = ko.observableArray([{ id: 1, type: 'type1' }, { id: 2, type: 'type2' }]);
self.selectedBar = ko.observable();
self.selectedType = ko.observable();
self.selectedBar.subscribe(function(){
});
};
var vm = (function () {
var foos = ko.observableArray([]),
loadFoo = function () {
foos.push(new Foo()
.id(1)
.selectedBar(1)
.selectedType(1));
foos.push(new Foo()
.id(2)
.selectedBar(2)
.selectedType(2));
foos.push(new Foo()
.id(3)
.selectedBar(3)
.selectedType(2));
},
bars = ko.observableArray([
{ id: 1, bar: 'bar1' },
{ id: 2, bar: 'bar2', },
{ id: 3, bar: 'bar3', }
]);
return {
foos: foos,
loadFoo: loadFoo,
bars: bars
};
}());
vm.loadFoo();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div style="float: left">
<table>
<tr>
<th>Bar</th>
<th>Foo</th>
</tr>
<!-- ko foreach: foos -->
<tr>
<td>
<select data-bind="options: $root.bars, optionsText: 'bar', optionsValue: 'id', value: selectedBar"></select>
</td>
<td>
<select data-bind="options: types, optionsText: 'type', optionsValue: 'id', value: selectedType"></select>
</td>
</tr>
<!-- /ko -->
</table>
</div>
<div style="float: left">
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
</div>
在Bar列中,如果我选择bar1,我可以在类型栏中选择的将是type1ype2。但是,如果我选择的不是栏1,我只能选择类型2。
这可能吗?我尝试过手动订阅,但似乎无法实现。
任何帮助都将不胜感激。感谢
您可以使用类似的计算扩展Foo
对象
self.displayedTypes = ko.computed(function(){
if(self.selectedBar()=="1"){
return [{ id: 1, type: 'type1' }, { id: 2, type: 'type2' }];
};
if(self.selectedBar()=="2"){
return [{ id: 2, type: 'type2' }];
}
});
你的html就像
<select data-bind="options: displayedTypes, optionsText: 'type', optionsValue: 'id', value: selectedType"></select>
相关文章:
- 如何在按钮中显示下拉列表中选定的元素
- KendoUI 工具栏拆分按钮会自动突出显示下拉列表中的第一个选项.如何使所有选项看起来相同
- 所选多选在首次单击时不显示下拉列表
- jQuery 自动完成:首次键入后不显示下拉列表
- 单击其他元素(文本输入)时显示下拉列表
- 在索引上显示下拉列表更改了另一个下拉列表 .net 2.0
- 如何在jQuery弹出窗口中显示下拉列表选择列表并检索所选值
- 每次单击按钮时显示下拉列表
- 从 URL 获取选项值,以显示下拉列表中的特定菜单项
- 如何以大写字母单独显示下拉列表的选定值
- jQuery函数,一个用于在单击时显示下拉列表,另一个用于从下拉列表中获取所选项目
- 在jsp页面中显示下拉列表的选定值
- jquery时间选择器不显示下拉列表
- 根据正确选择的单选按钮显示下拉列表
- Javascript隐藏/显示下拉列表中的项目
- 如何在asp.net中显示下拉列表的所有项
- 停止chrome显示下拉列表时,单击一个选择
- jQuery -点击链接时不能显示下拉列表
- 如何在角材质的对话框内容中显示下拉列表/下拉列表/选择列表?
- 在模式窗口MVC4上显示下拉列表