JSFiddle - React, Tailwind, and code Playground

by vollossy

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<div id="ololo">
    <p>
        Your country: 
        <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>
    </p>
    
    <div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
        You have chosen a country with population 
        <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
    </div>
</div>

JavaScript

// Constructor for an object with two properties    
var country = function(name, population) {
    this.countryName = name;
    this.countryPopulation = population;
};

var viewModel = {
    availableCountries: ko.observableArray([
        new country("UK", 65000000),
        new country("USA", 320000000),
        new country("Sweden", 29000000)
        ]),
    selectedCountry: ko.observable() // Nothing selected by default
};

ko.applyBindings(viewModel, $("#ololo")[0]);