How to change value of select component from JS (TS) using Knockout?
Tugrul Emre Atalay
I have 2 select components which should affect each other. I've tried to solve this problem with the manual, but I'm surprised.
Note 1: selectedIndex has no effect.
Note 2: Changing the value of JS(TS) will not update the component.
Here is the HTML code:
<select data-bind="options: interestRates, optionsText: 'TaksitAraligi', value: selectedInstallmentRange"></select>
<select data-bind="options: interestRates, optionsText: 'TutarAraligi', value: selectedAmountRange"></select>
<div class="summary-row-item-value">
% {{interestRates()[selectedRate()].FaizOrani}}
</div>
Here is the TypeScript code
this.selectedInstallmentRange.subscribe(function (value) {
if (value && value.TaksitAraligi) {
if (_self.willChange)
_self.interestRates().forEach(function (item: any, i: number = 0) {
if (item.TaksitAraligi === value.TaksitAraligi) {
_self.selectedRate(i);
_self.willChange = false;
_self.selectedAmountRange(_self.interestRates()[_self.selectedRate()].TutarAraligi);
}
i++;
});
else
_self.willChange = true;
}
});
this.selectedAmountRange.subscribe(function (value) {
if (value && value.TutarAraligi) {
if (_self.willChange)
_self.interestRates().forEach(function (item: any, i: number = 0) {
if (item.TutarAraligi === value.TutarAraligi) {
_self.selectedRate(i);
_self.willChange = false;
_self.selectedInstallmentRange(_self.interestRates()[_self.selectedRate()].TaksitAraligi);
}
i++;
});
else
_self.willChange = true;
}
});
I added willChange due to infinite loop.
The second problem is solved. I keep updating the data incorrectly. shouldn't be like that
_self.selectedAmountRange(_self.interestRates()[_self.selectedRate()].TutarAraligi);
use correctly;
_self.selectedAmountRange(_self.interestRates()[_self.selectedRate()]);
Andrea Casaccia
It's not clear to me what exactly you're trying to achieve, but you can ko.computed()
update the options
dependency selection with . Alternatively, if you need to update value
the subordinate selection, you can subscribe to the change first.
template:
<div>
<h3>Controller Select:</h3>
<select data-bind="options: select1Options, value: select1Value"></select>
</div>
<div>
<h3>Select with options dependency:</h3>
<p>(options updated based on controller selection)</p>
<select data-bind="options: select2Options"></select>
</div>
<div>
<h3>Select with value dependency:</h3>
<p>(value updated based on controller selection)</p>
<select data-bind="options: select3Options, value: select3Value"></select>
</div>
ViewModel:
function ViewModel() {
var self = this;
this.select1Options = ko.observableArray(['asd', 'lol', 'rofl']);
this.select3Options = ko.observableArray(['asd', 'lol', 'rofl']);
this.select1Value = ko.observable(null);
this.select3Value = ko.observable(null);
this.optionsMap = {
'asd': [ 'asd_suboption_1', 'asd_suboption_2', 'asd_suboption_3' ],
'lol': [ 'lol_suboption_1', 'lol_suboption_2', 'lol_suboption_3' ],
'rofl': [ 'rofl_suboption_1', 'rofl_suboption_2', 'rofl_suboption_3' ],
}
this.select2Options = ko.computed(function(){
return self.optionsMap[self.select1Value()];
});
this.select1Value.subscribe(function(value){
self.select3Value(value);
});
};
ko.applyBindings(ViewModel);
Working example : https://jsfiddle.net/vqzvu4pw/9/