JSFiddle - React, Tailwind, and code Playground

by harsh vardhan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://rawgit.com/craftpip/bootstrap-fullscreen-select/master/css/bootstrap-fullscreen-select.css">
<script src="https://rawgit.com/craftpip/bootstrap-fullscreen-select/master/js/bootstrap-fullscreen-select.js"></script>
<script src="https://rawgit.com/craftpip/bootstrap-fullscreen-select/master/js/bootstrap-fullscreen-select.min.js"></script>
<select class="menu" data-bind="   
   options: messages,
   optionsText: 'message',
   menu:{},
   optionsValue: 'Value'"></select>

JavaScript

var ViewModel = function () {
    var self = this;
    self.messages = [{
        message: "Hello",
        Value: 1
    }, {
        message: "Hi",
        Value: 2
    }, {
        message: "Bye",
        Value: 3
    }, ]

    self.msgStore = ko.observable();
    self.msgStore.subscribe(function (val) {})

}


ko.bindingHandlers.menu = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).mobileSelect({});
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        ko.utils.unwrapObservable(valueAccessor());
    }
};

ko.applyBindings(new ViewModel());