JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.2.3/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.2.3/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/15.2.3/js/dx.all.js"></script>
<div id="selectLevel"></div>

JavaScript

var levels = [{
  "level_id": "1",
  "name": "Varsity",
  "slug": "varsity"
}, {
  "level_id": "2",
  "name": "JV",
  "slug": "jr-varsity"
}, {
  "level_id": "3",
  "name": "Intramural",
  "slug": "intramural"
}, {
  "level_id": "4",
  "name": "Freshman",
  "slug": "freshman"
}, {
  "level_id": "5",
  "name": "3rds",
  "slug": "thirds"
}];


var selectLevel = $("#selectLevel").dxSelectBox({
  dataSource: levels,
  valueExpr: "level_id",
  displayExpr: "name",
  value: "4",
  searchEnabled: true,
  paginate: false,
  deferRendering: false
}).dxSelectBox('instance');