JSFiddle - React, Tailwind, and code Playground

by txhi

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 data-bind="submit: addItem">
  <div>
    <div>
      <p>
        Your Items</p>
      <div id="list" data-bind="change: eventChange, jqxDropDownList: {source: items, disabled: disabled, selectedIndex: selectedIndex, autoDropDownHeight: true, height: 25, width: 200,}">
      </div>
    </div>
    <div style="margin-top: 10px;">
      New item:
      <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
      <button id="addButton" data-bind="jqxButton: {}" type="submit">
        Add</button>
      <button id="removeButton" data-bind="click: removeItem, jqxButton: {}">
        Remove</button>
    </div>
    <div style="margin-top: 10px;">
      <button data-bind="click: setIndex, jqxButton: {}" id="setButton">
        Select Index</button>
      <button data-bind="click: getIndex, jqxButton: {}" id="getButton">
        Get Selected Index</button>
    </div>
    <div data-bind="jqxCheckBox: {checked: disabled}" style='margin-top: 5px;' id="checkBox">Disabled</div>
  </div>
</form>

JavaScript

// View Model
var listModel = function (items) {
  this.items = ko.observableArray(items);
  this.itemToAdd = ko.observable("");
  this.disabled = ko.observable(false);
  this.selectedIndex = ko.observable(1);
  // adds new item.
  this.addItem = function () {
    if (this.itemToAdd() != "") {
      this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
      this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
    }
  } .bind(this);  // Ensure that "this" is always this view model
  // removes item.
  this.removeItem = function () {
    this.items.pop();
  }
  // gets the selected index.
  this.getIndex = function () {
    alert("Selected Index: " + this.selectedIndex());
  }
  // sets the selected index.
  this.setIndex = function () {
    this.selectedIndex(1);
  }

  this.eventChange = function () {
    console.log('1344')
  }
};
ko.applyBindings(new listModel(["Caffé Latte", "Cortado", "Espresso"]));

$('#list').bind('change', function (event) {
  var args = event.args;
  if (args) {
    // index represents the item's index.                      
    var index = args.index;
    var item = args.item;
    // get item's label and value.
    var label = item.label;
    var value = item.value;
    var type = args.type; // keyboard, mouse or null depending on how the item was selected.

    console.log(value);
  }
});

$('#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);
    alert(label + ' value: ' + value);
  }
});