JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<select data-bind="value: selectedItemOne,chosen : true "  class="chzn-select" style="width:300px;" >
      <option value="001">Option 1</option>
      <option value="002">Option 2</option>
      <option value="003">Option 3</option>
      <option value="004">Option 4</option>
      <option value="005">Option 5</option>
    </select>
<button data-bind="click : showOne"> SHOW SELECTED ID </button>

<div></div>

<select data-bind="options: sample , value: selectedItemTwo, chosen : true, optionsText: 'name', optionsValue: 'value'   "  class="chzn-select" style="width:300px;" ></select>
<button data-bind="click : showTwo"> SHOW SELECTED ID </button>

JavaScript

ko.bindingHandlers.chosen = {
	        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
	            $(element).chosen();	      	
	        },
	        update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
	            $(element).trigger("liszt:updated");	     
	        }
};

var viewModel = {
    sample : ko.observableArray([{"name": "Sample Option 1" , "value" : 1 } , {"name": "Sample Option 2" , "value" : 2 }, {"name": "Sample Option 3" , "value" : 3 }]),
    selectedItemOne : ko.observable(),
    selectedItemTwo : ko.observable(),
    showOne : function(){ alert(this.selectedItemOne()) },
    showTwo: function(){ alert(this.selectedItemTwo()) }
};

ko.applyBindings(viewModel);