JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<select data-bind="options: selectList, value: firstSelect"></select>
<select data-bind="options: selectList, value: secondSelect, minVal: firstSelect"></select>
JavaScript
ViewModel = function () {
var self = this;
self.firstSelect = ko.observable();
self.secondSelect = ko.observable();
self.selectList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
};
ko.bindingHandlers.minVal = {
update: function (element, valueAccessor) {
var firstValue = ko.utils.unwrapObservable(valueAccessor());
var firstNext = null;
$(element).children().each(function () {
var $this = $(this);
if ($this.val() <= firstValue) {
$this.attr('disabled', 'disabled');
} else {
if (firstNext == undefined) {
firstNext = $this.val();
if (firstNext >= $(element).val()) {
$(element).val(firstNext);
$(element).change();
}
}
}
});
}
};
var vm = new ViewModel();
ko.applyBindings(vm);