JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<div>
 <span data-bind="text: message"></span>
 <select id="chosen-select" class="chosen" style="width:300px;" data-bind="options:selectList, optionsText: $data, optionsValue: $data,chosen:{}">
 </select>
 <button data-bind="click: add">Add
 </button>
</div>

JavaScript

function ViewModel(){
var self= this;
	this.message = ko.observable("hello");
  this.selectList = ko.observableArray([1]);
  this.number= ko.observable(1);
  this.add = function(data,event){
  	self.selectList.push(2);
  };
  
  this.selectList.subscribe(function(value){
  	console.log(value);
  })
}

ko.bindingHandlers.chosen = {
	init: function(element, valueAccessor, allBindingAccessors, viewModel){
  	ko.bindingHandlers.options.init(element);
    $(element).addClass('chzn-select');
    $(element).chosen();
  },
  
  update: function(element, valueAccessor, allBindingAccessors, viewModel){
  	var value = ko.unwrap(valueAccessor());
    ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessors);
    $(element).trigger('liszt:updated');
  }
};
ko.applyBindings(new ViewModel());