Knockout.js 淘汰多选选项不起作用
我正在尝试将多选下拉列表中的选定项目移动到另一个多选下拉列表。 在我的例子中,即使数据是可观察数组,选择列表也不会刷新 我的代码在JSFIDLE中。多谢各位Knockout.js 淘汰多选选项不起作用,knockout.js,Knockout.js,我正在尝试将多选下拉列表中的选定项目移动到另一个多选下拉列表。 在我的例子中,即使数据是可观察数组,选择列表也不会刷新 我的代码在JSFIDLE中。多谢各位 self.Move = function(){ if (self.availableMAS.length > 0 && $('#selectedAttributes1 :selected').length > 0) { //self.selectedMAS = [];
self.Move = function(){
if (self.availableMAS.length > 0 && $('#selectedAttributes1 :selected').length > 0)
{
//self.selectedMAS = [];
$('#selectedAttributes1 :selected').each(function(i, selected){
self.selectedMAS.push(new MAs($(selected).val(), $(selected).text()));
self.availableMAS.push(new MAs($(selected).val(), $(selected).text()));
//alert($(selected).text() + $(selected).val());
alert(self.selectedMAS.length);
});
}
看起来你有一些事情要做。您正在将selectedMAS创建为可观察数组,但随后将其分配给对象。此外,您没有利用按钮和选择控件的数据绑定功能 请参阅此更新: 更新的移动功能:
self.Move = function(){
for( var i = 0, len = self.selectedItms().length; i < len; i++) {
self.selectedMAS.push(self.selectedItms()[i]);
}
};
self.Move=function(){
for(变量i=0,len=self.selectedItms().length;i
更新的HTML:
<select id="selectedAttributes1"
data-bind="options: availableMAS,
selectedOptions: selectedItms,
optionsText: 'Name'"
multiple size="6">
</select>
<input id="btnMove" type=button value="Move" data-bind="click: Move" ></input>
<select id="selectedAttributes2"
data-bind="options: selectedMAS,
optionsText: 'Name',
selectedOptions: selectedMAS"
multiple size="6">
</select>
首先,在下一行:
vm.selectedMAS = [new MAs(1, 'Name1')];
您正在用裸(不可见)数组替换selectedMAS
,而不是调用其push
方法:
vm.selectedMAS.push(new MAs(1, 'Name1'));
主要的一点是,您需要使用绑定处理程序来实现多选项检查:
<select multiple size="6" data-bind="options: availableMAS,
selectedOptions: selectedMAS,
optionsText: 'Name'">
</select>
阅读时:
<select multiple size="6" data-bind="options: selectedMAS,
optionsText: 'Name'">
</select>
请参见如果要使用击倒,请使用击倒。JQuery有它的位置,但不是为了您想要的使用方式。