How create bind to data-text-field on select?

Question

I have a dropdown which initialized by select element.

How create mvvm bind to a selected data-text-field?

I don't have data source.

<select id="size">
                <option value="1">S - 6 3/4"</option>
                <option value="2">M - 7 1/4"</option>
                <option value="3">L - 7 1/8"</option>
                <option value="4">XL - 7 5/8"</option>
</select>

I have to bind to selected text. example: M - 7 1/4" and to value

Updated

Answer 1

You can simply bind to the value of the <select> - this will use the text if the options don't have a value set; if you need both, you could use a calculated field for the text:

HTML:

<div id="bindme">
    <select id="size" data-bind="value: selectedValue">
        <option value="1">S - 6 3/4"</option>
        <option value="2">M - 7 1/4"</option>
        <option value="3">L - 7 1/8"</option>
        <option value="4">XL - 7 5/8"</option>
    </select>
    <div data-bind="text: selectedValue"></div>
    <div data-bind="text: selectedText"></div>
</div>

JS:

var viewModel = kendo.observable({
    selectedValue: 2,
    selectedText: function () {
        var value = this.get("selectedValue");
        var text = $('#size option[value="' + value + '"]').html();

        return text;
    }
});

kendo.bind($("#bindme"), viewModel);

See demo

There are other ways to do this (this is not very pretty because it's coupled with the DOM), e.g. with a custom binding, or something like this. It kind of depends on your exact setup.