JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<h1>Knockout js cascading dropdown example</h1>

<select data-bind="options: countries, optionsCaption: 'Choose country...', optionsValue: function(item) { return item.value; }, optionsText: function(item) { return item.text; }, value: countrySelect, valueUpdate: 'change'" id="Country" name="Country"></select>
<select data-bind="options: states, optionsCaption: 'Choose state...', optionsValue: function(item) { return item.value; }, optionsText: function(item) { return item.text; }, value: stateSelect, valueUpdate: 'change'" id="State" name="State"></select>
<select data-bind="options: cities, optionsCaption: 'Choose city...', optionsValue: function(item) { return item.value; }, optionsText: function(item) { return item.text; }, value: city, valueUpdate: 'change'" id="State" name="City"></select>
<div data-bind="text: result"></div>

JavaScript

var viewModel = {
    country: ko.observable(),
    countries: ko.observableArray(),
    state: ko.observable(),
    states: ko.observableArray(),
    city: ko.observable(),
    cities: ko.observableArray(),
    result: ko.observable()
};
viewModel.countrySelect = ko.computed({
    read: viewModel.country,
    write: function (country) {
        this.country(country);
        $.getJSON('http://localhost:56502/KnockoutJS/CascadingDropdown/States/' + country.value, null, function (response) {
            viewModel.states(response);
        });
    },
    owner: viewModel
});
viewModel.stateSelect = ko.computed({
    read: viewModel.state,
    write: function (state) {
        this.state(state);
        $.getJSON('http://localhost:56502/KnockoutJS/CascadingDropdown/Cities/' + state.value, null, function (response) {
            viewModel.cities(response);
        });
    },
    owner: viewModel
});
viewModel.result = ko.computed(function () {
    var result = '';
    result += this.country() !== undefined ? 'Country: ' + this.country().text + ', ' : '';
    result += this.state() !== undefined ? 'State: ' + this.state().text + ', ' : '';
    result += this.city() !== undefined ? 'City: ' + this.city().text : '';
    return result;
}, viewModel);

$(function () {
    $.getJSON('http://localhost:56502/KnockoutJS/CascadingDropdown/Countries/', null, function (response) {
        viewModel.countries(response);
    });
    ko.applyBindings(viewModel);
});