Tuesday, 6 August 2013

Independent dropdownbox using the same Options with KnockOut.JS

Independent dropdownbox using the same Options with KnockOut.JS

I'm using the same variable to load the Options that is in the types var
in a Combo Box.
But when I change the first one, the second one changes as well
Is there any why I can use the same "types" Variable to load both boxes
and each one be independent?
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<select data-bind="options: types, optionsCaption: '* Select *',
optionsText: 'name', optionsValue: 'id', value:
model.idSelected "></select>
<select data-bind="options: types, optionsCaption: '* Select *',
optionsText: 'name', optionsValue: 'id', value: model.idSelected
"></select>
<br />
Selected ID on First Combo: <b data-bind="text: model.idSelected"></b><br />
Selected ID on Second Combo: <b data-bind="text: model.idSelected"></b>
Script var types = [ { id: 1, name: 'One' }, { id: 2, name: 'Two' }, { id:
3, name: 'Three' }
];
function model() {
var self = this;
self.id = ko.observable(0);
self.idSelected = ko.observable();
}
var viewModel = {};
viewModel.model = new model();
viewModel.types = types;
ko.applyBindings(viewModel);
http://jsfiddle.net/belzebu/9wuFE/1/

No comments:

Post a Comment