knockout bind text label to dropdown value selected option text - data-binding

Question

Is there a simple way to bind the textbox of a div to change based on the text value of the selected option in a dropdown on the same page?
<div data-bind="text: dropdownValue"></div>
<select>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
Please note, I don't want to put the values into the select element using javascript. I'd like to bind to the value straight from the HTML. I can also include jQuery to make it work.

Answer 1

I was looking for similar functionality in something I was throwing together yesterday and couldn't find it, so I ended up just changing what I was storing in the value attributes. Sometimes that's the simplest solution.
Here's a quick and kind of ugly solution to the problem using 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());
Live example: http://jsfiddle.net/5PkBF/
If you were looking to do this in multiple places, it'd probably be best to write a custom binding, e.g.:
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());
Live example: http://jsfiddle.net/5PkBF/1/

Answer 2

This is how I implemented a similar feature. I had an observable defined in my model called 'dropDownValue'. I also had an observable array called 'dropDownValues'. My HTML looked something like:
<span data-bind="text: dropDownValue"></span>
<select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>
Note that I used the same field for optionValues and optionsText (not sure optionsText is really needed in this case). In my particular app 'dropDownValue' was pre-populated elsewhere, so when I opened a dialog box with the above select in it I wanted it to default to the previously populated value, and also bind it so that if the user changed it, I could reflect that change back in the database.