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 optionsdependency selection with . Alternatively, if you need to update valuethe 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/

Related


populate table from table select using knockout table js

iambdot I have a list of values in a table with an edit button using knockout.js and when the edit button is clicked I want the table above the list to be populated with the values from the table. How can I do this with the current culling viewmodel? This is H

How to change checkbox checked value in Knockout.js?

stereotaxic I want to change the value of the checkbox via jQuery, but the knockout binding doesn't work var viewModel = { myValue: ko.observable(true) }; ko.applyBindings(viewModel); $(':checkbox').prop({checked: false}).change(); http://jsfiddle.net/s

How to populate select tag using knockout js and jquery?

username I just want to populate several select tags rendered using jquery. Incoming model from server: public class DepthChartsVm { public List<DepthChartModel> ReturnDepthCharts {get;set;} } public class DepthChartModel { public Team Team {get;set;}

How to populate select tag using knockout js and jquery?

username I just want to populate several select tags rendered using jquery. Incoming model from server: public class DepthChartsVm { public List<DepthChartModel> ReturnDepthCharts {get;set;} } public class DepthChartModel { public Team Team {get;set;}

How to pass value from HTML field to component ts

Hasoun GH I'm sending a value from an HTML page to a TS component without using a form, I get a build error when trying to npm run build, here is the example: I use > npm run dev or > ng build no problem, but when I build it for production it gives an error us

How to pass value from HTML field to component ts

Hasoun GH I'm sending a value from an HTML page to a TS component without using a form, I get a build error when trying to npm run build, here is the example: I use > npm run dev or > ng build no problem, but when I build it for production it gives an error us

How to get selected value from select component

Rafael Augusto How to get selected value from select component? select.component.ts: export class PfSelectComponent implements OnInit { constructor() { } ngOnInit() { } @Input() options : Array<Object>; } select.component.html <select [(ngModel)]=

How to get selected value from select component

Rafael Augusto How to get selected value from select component? select.component.ts: export class PfSelectComponent implements OnInit { constructor() { } ngOnInit() { } @Input() options : Array<Object>; } select.component.html <select [(ngModel)]=

How to get selected value from select component

Rafael Augusto How to get selected value from select component? select.component.ts: export class PfSelectComponent implements OnInit { constructor() { } ngOnInit() { } @Input() options : Array<Object>; } select.component.html <select [(ngModel)]=

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati