JSFiddle - React, Tailwind, and code Playground

by baragon23

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<form>
  <div>
    <div>
      <ol>
        <li>1. Click the down arrow with your mouse</li>
        <li>2. Press 'H' on your keyboard. 'Hazel' will be highlighted.</li>
        <li>3. Click 'Hazel' with your mouse.</li>
        <li>4. You will notice that the alert inside the selectedIndex.subscribe never fired.</li>
      </ol>
      <p>Your Items</p>
      <div id="list" data-bind="jqxDropDownList: {source: items, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200,}">
      </div>
    </div>

  </div>
</form>

JavaScript

// View Model
var listModel = function (items) {
  this.items = ko.observableArray(items);
  this.selectedIndex = ko.observable(0);
  this.selectedIndex.subscribe(function(v) {
  	alert('changed');
  });

};

ko.applyBindings(new listModel(["Blue", "Dark", "Gray", "Green", "Hazel", "Magenta", "Red"]));

$('#list').bind('change', function(event) {
	console.log(event);
});

/*$('#list').bind('select', function (event) {
  var args = event.args;
  if (args) {
    var item = args.item;
    var label = item.label;
    var value = item.value;
    console.log(label); // event.args.item.label
    //alert(label + ' value: ' + value);
  }
});*/