JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.1.js"></script>
<p>
    Select a country:
    <select data-bind="options: countries,
                       optionsCaption: 'Choose one...',
                       value: selectedCountry,
                       valueAllowUnset: true"></select>
</p>
<p>
    <button data-bind="click: selectAnExistentCountry">Select an existent country</button> <button data-bind="click: selectANonExistentCountry">Select a non-existent country</button>
</p>
<p>
    <button data-bind="click: selectUndefined">Select undefined</button>
</p>
<p>
    <button data-bind="click: selectAnExistentCountryThenUndefined">Select an existent country then undefined</button>
</p>
<p>
    <button data-bind="click: selectANonExistentCountryThenUndefined">Select a non-existent country then undefined</button>
</p>

JavaScript

var viewModel = {
    countries: ['Japan', 'Bolivia', 'New Zealand'],
        selectedCountry: ko.observable('Latvia'),
    
    selectUndefined: function(){
        viewModel.selectedCountry(undefined);
    },
    selectAnExistentCountry: function(){
        viewModel.selectedCountry("Japan");
    },
    selectANonExistentCountry: function(){
        viewModel.selectedCountry("Latvia");
    },
    selectAnExistentCountryThenUndefined: function(){
        viewModel.selectedCountry("Japan");
        window.setTimeout(function(){
            viewModel.selectedCountry(undefined);
        }, 100);
    },
    selectANonExistentCountryThenUndefined: function(){
        viewModel.selectedCountry("Latvia");
        window.setTimeout(function(){
            viewModel.selectedCountry(undefined);
        }, 100);
    },
 };
 ko.applyBindings(viewModel);