JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<select data-bind="
                   textInput:selectedOption, 
                   
                   placeholder:'Choose...'"/> 

 <li data-bind="foreach: { data: getCurrentLocations(), as: 'locations' }">
    <a data-bind="text:locations.title"></a>
 </li>

JavaScript

var locationsArray =[{title:"Cinema",location:"NY"},{title:"Restaurant",location:"Miami"}];

var viewModel = {
    locations: ko.observableArray(locationsArray),
    selectedOption: ko.observable(''),
    getCurrentLocations: function() {
        var selectedVal = this.selectedOption();

				if (!selectedVal)
        	return this.locations;

        return this.locations().filter(function(f) {
            return f.location == selectedVal.location;
        });
    }
};

ko.applyBindings(viewModel);