JSFiddle - React, Tailwind, and code Playground

by Ruchika Sharma

HTML

<script src="http://jshost.googlecode.com/hg/knockout-1.3pre.js"></script>
<h3>Departments</h3>

<select data-bind='options:departmentOptions, optionsValue:"name", value:department, optionsCaption:"Select...", optionsText:"name"'></select>


<span data-bind="text:department"> </span>

CSS

body { font-family: Arial, Helvetica }

JavaScript

var departmentOptions = [{
    "id": 861,
    "name": "Team 1"},
{
    "id": 21,
    "name": "Team 2"}];
var subDepartmentOptions = {
    "21": [{
        "id": 22,
        "name": "Player 1"},
    {
        "id": 23,
        "name": "Player 2"}],
    "861": [{
        "id": 862,
        "name": "Player 3"},
    {
        "id": 863,
        "name": "Player 4"}]
};

$(document).ready(function() {
    var viewModel = {
        department: ko.observable("861"),
        subDepartment: ko.observable("863")
    };
    viewModel.department.subscribe(function(newValue) {
        viewModel.subDepartment(null);
    });
    viewModel.subDepartmentOptions = function() {
        return subDepartmentOptions[viewModel.department()];
    };

    ko.applyBindings(viewModel);
});