KnockoutJS cannot perform value binding with select

Question

My ViewModel is like this:

$(document).ready(function () {
    vm = new poReceivingModel();
    ko.applyBindings(vm);
});

function poReceivingModel(){
    var self = this;
    self.order_id = ko.observable()
}

And my html is like this:

<select id="id_po" class="form-control" name="po" data-bind="value:order_id">
<option value="1">4323</option>
<option value="2">1234</option>
</select>

<h1 data-bind="value: order_id">It is</h1>

When I select option of the select the value is not being updated. I checked the documentation and found value binding with options binding. But in my case I only want value binding. Please help me correct my mistake.

Answer 1

Everything looks good, you just need to use a different binding on the h1 element, you're probably wanting to use "text"

<select id="id_po" class="form-control" name="po" data-bind="value:order_id">
<option value="1">4323</option>
<option value="2">1234</option>
</select>

<h1 data-bind="text: order_id">It is</h1>