JSFiddle - React, Tailwind, and code Playground

by apuchkov

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.debug.js"></script>
  <select data-bind="value: selectedMake, options: makes"></select>
  <select data-bind="value: selectedModel, options: models"></select>
  <p>Selected make: <b data-bind="text:selectedMake"></b></p>
  <p>Selected model: <b data-bind="text:selectedModel"></b></p>

JavaScript

function ViewModel() {
        var self = this;

        self.selectedMake = ko.observable()
        self.selectedModel = ko.observable()
                
        self.makes = ["Honda", "Toyota"];
        self.models = ko.computed(function () {
            if (self.selectedMake() === "Honda") 
              return ["CRV", "Accord"];
            if (self.selectedMake() === "Toyota") 
              return ["Rav4", "Camry"];
            return [];
        });
    }

    $(function(){
      ko.applyBindings(new ViewModel());
    });