JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<select data-bind="options: venues, value:selectedVenue"></select>
<select data-bind="options: events, value:selectedEvent"></select>
<div data-bind="text: stuff"></div>
JavaScript
var vm = function() {
var
venues = ko.observableArray([9,8,7,6,5,4,3,2,1]),
events = ko.observableArray([]),
selectedVenue = ko.observable(null),
selectedEvent = ko.observable(null),
stuff = ko.observable(),
venueChange = ko.computed(function () {
var venue = selectedVenue();
if (venue) {
alert(venue);
var amt = Math.floor((Math.random()*10)+1);
events([]);
for(var i = 0; i < amt; i++){
events.push(Math.floor((Math.random()*10)+1));
}
//Do stuff here such as load events/'your second list'
//events([1,2,3,4,5,6,7]);
}
}),
eventChange = ko.computed(function () {
var event = selectedEvent();
if (event) {
stuff('You Picked # ' + event);
//Do stuff again
}
});
return {
venues:venues,
events:events,
selectedVenue: selectedVenue,
selectedEvent: selectedEvent,
stuff:stuff
};
};
ko.applyBindings(new vm());