我無法獲取綁定下拉列表中的選定項目。淘汰賽下拉列表
<p>
Your Group:
<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select>
</p>
<p>
I am visible
You have chosen <span data-bind="text: selectedGroup() ? selectedGroup().Name : 'Nothing'"></span>
</p>
當我從下拉列表中選擇一些內容時，我希望得到選擇的文本，而不是值。我對淘汰賽非常陌生，並試圖解決這個問題。我爲此創建了一個小提琴。
http://jsfiddle.net/voam/FjRxn/
變化
<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select>
要：
<select data-bind="options: availableGroups, optionsText: 'Name', value: selectedGroup, optionsCaption: 'Choose...'"></select>
雖然我也需要保留GroupId作爲選項的值字段。 – voam 2013-02-13 21:58:44
對於你原來的問題@皮特的答案是正確的，但因爲你需要保留的GroupId的值，你可以做this (modified fiddle) 。
首先selectedGroup屬性更名爲selectedGroupId。
然後一個新的計算觀察到的selectedGroup是基於selectedGroupId定義：
self.selectedGroup = ko.computed(function() {
for (var i = 0; i < groups.length; i++) {
if (groups[i].GroupId == self.selectedGroupId())
return groups[i];
}
return null;
});
另外，var self = this定義
你也可以用你的觀察到selectedGroup訂閱功能。我還創建了另一個observable作爲「selectedGroupId」。
在預訂事件，我給你的GroupId的值，以新的可觀察的「selectedGroupId」
self.selectedGroup.subscribe(function(item)
{
debugger;
self.selectedGroupId(item.GroupId);
return item.Name;
});
請參閱更新小提琴here
我只是想發佈一個解決方案，我最近使用來解決這個問題。它利用綁定處理程序（valueAppendText和textFromOption）並將可觀察對象附加到正在由下拉列表跟蹤的可觀察對象。此解決方案不完整，但演示了不使用添加計算來獲取下拉文本的想法。這個解決方案也使用了jQuery，它可以被刪除，但是因爲我在我的項目中使用了jQuery（主要是），所以我將它留下了。下面的jsFiddle鏈接演示了這個功能。
小提琴： http://jsfiddle.net/FjRxn/65/
標記：
<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', valueAppendText: selectedGroup, optionsCaption: 'Choose...'"></select>
<p>
I am visible
You have chosen <span data-bind="textFromOption: selectedGroup"></span>
<div>
Group Id: <span data-bind="text: selectedGroup"></span>
</div>
</p>
裝訂處理程序：
ko.bindingHandlers.valueAppendText = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
var $element, newValueAccessor, observable, setText;
observable = valueAccessor();
observable.selectedOptionText = ko.observable(null);
newValueAccessor = function() {
return observable;
};
$element = $(element);
setText = function() {
return observable.selectedOptionText($element.find("option:selected").text());
};
setTimeout(setText, 5);
$element.change(function() {
return setText();
});
return ko.bindingHandlers.value.init(element, newValueAccessor, allBindingsAccessor, context);
},
update: function(element, valueAccessor, allBindingsAccessor, context) {
return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, context);
}
};
ko.bindingHandlers.textFromOption = {
update: function(element, valueAccessor, allBindingsAccessor, context) {
var newValueAccessor, observable;
observable = valueAccessor();
newValueAccessor = function() {
if (ko.isObservable(observable.selectedOptionText)) {
return observable.selectedOptionText();
}
return observable();
};
return ko.bindingHandlers.text.update(element, newValueAccessor, allBindingsAccessor, context);
}
};
最簡單的解決辦法是刪除optionsValue從你的元素結合。然後它會將整個對象存儲在可觀察對象中，並且可以獲取所有屬性。
<select data-bind="options: availableGroups, optionsText: 'Name',
value: selectedGroup, optionsCaption: 'Choose...'"></select>
爲什麼不使用下拉文本值？ – DevelopmentIsMyPassion 2013-02-13 21:43:01
我現在看到我正在嘗試使用所有設置爲生成標記中的groupid字段的選項值生成下拉列表，這不是必需的。所以即使這些值沒有在標記中設置，當我檢索選定的項目時，我可以將GroupId字段作爲選定組對象的一部分。 – voam 2013-02-13 22:08:06