是否有一个div的文本框结合来改变基于同一页上下拉所选选项的文本值的简单方法？
<div data-bind="text: dropdownValue"></div>
<select>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
请注意，我不希望把值到使用JavaScript select元素。 我想绑定到从HTML值直线。 我还可以包括jQuery的，使其工作。
Answer 1:
我一直在寻找的东西，我昨天扔在一起，但没有找到它类似的功能，所以我最终只是改变了我的价值属性被存储。 有时候，这是最简单的解决方案。
这里有一个快速和一种丑陋的解决方案，以使用jQuery的问题：
HTML
<div data-bind="text: dropdownText"></div>
<select data-bind="value: dropdownValue" id="dropdown">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
JS
function ViewModel() {
var self = this;
this.dropdownValue = ko.observable();
this.dropdownText = ko.computed(function() {
return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
});
};
ko.applyBindings(new ViewModel());
活生生的例子： http://jsfiddle.net/5PkBF/
如果你要做到这一点在多个地方，它很可能是最好写一个自定义绑定，例如：
HTML
<div data-bind="text: dropdownValue"></div>
<select data-bind="selectedText: dropdownValue">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
JS
ko.bindingHandlers.selectedText = {
init: function(element, valueAccessor) {
var value = valueAccessor();
value($("option:selected", element).text());
$(element).change(function() {
value($("option:selected", this).text());
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
}
};
function ViewModel() {
this.dropdownValue = ko.observable();
};
ko.applyBindings(new ViewModel());
活生生的例子： http://jsfiddle.net/5PkBF/1/
Answer 2:
这是我如何实现类似的功能。 我有一个观察到的在我的模型称为“dropDownValue”定义。 我也有一个被称为“dropDownValues”观察到的阵列。 我的HTML看起来是这样的：
<span data-bind="text: dropDownValue"></span>
<select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>
请注意，我用同样的领域optionValues和optionsText（确实需要在这种情况下，不知道optionsText）。 在我的特殊应用程序“dropDownValue”是其他地方的预填充，所以当我打开一个对话框，上面选择它，我希望它默认为先前填充值，也将其绑定，这样，如果用户改变了它，我能反映这种变化早在数据库中。
文章来源: knockout bind text label to dropdown value selected option text
