JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div>
<select data-bind="options: values, value: option, optionsCaption: 'Selecione...', event: { click: onClickSelect }"></select>
<label data-bind="text: option"></label>
</div>
JavaScript
var ViewModel = {
option: ko.observable(),
values: ko.observableArray()
};
ViewModel.onClickSelect = function (v, e) {
var sel = e.target;
if (sel.childNodes.length === 1) {
sel.childNodes[0].innerText = 'Loading...'
setTimeout(function () {
sel.childNodes[0].innerText = 'Selecione...'
ViewModel.values(["one", "two", "three"]);
sel.blur();
v.openSelect(sel);
}, 2000);
}
};
ViewModel.openSelect = function (element) {
if (document.createEvent) {
var e = document.createEvent("MouseEvents");
e.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(e);
}
else if (element.fireEvent) element.fireEvent("onmousedown");
}
ko.applyBindings(ViewModel);