JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<select data-bind="options: Users, optionsText: 'Name', optionsValue: 'Id',value: SelectedUser,event: { change: selectionChanged }"></select>

<input type="text" id="hiddenUser"></input>
<input type="hidden" id="hiddenUser2"></input>

JavaScript

var MyModule = (function () {

    var Users = ko.observableArray([]);
    var SelectedUser=ko.observable();
    //Call initialize method from .ready
    function init() {

        loadUsers();
        ko.applyBindings(this);
    }
    function selectionChanged(data){
    console.log(SelectedUser());
        $('#hiddenUser').val(SelectedUser());//Displaying it in Textbox
                $('#hiddenUser2').val(SelectedUser());//Saving it in hidden field

    };
    function loadUsers() {
        var ajaxdata = DummyAjaxCall(); //get all profiles

        $.each(ajaxdata, function (index, value) {
            Users.push(new UserViewModel(value)); //Create a Model
        });
        SelectedUser(22);//Hardcoded
        console.log(Users()); //View it

    }

    // explicitly return public methods when this object is instantiated
    return {
        Init: init,

        Users: Users,
        selectionChanged:selectionChanged,
        SelectedUser:SelectedUser
    };

})(window);

//  example usage
MyModule.Init(); // Call the INIT method for mymodule
function UserViewModel(data) {
    var self = this

    self.Id = data.Id;
    self.Name = data.Name;


}

function DummyAjaxCall() {
    //Sample Data
    var multipleData = [];
    var ajaxData = {};
    ajaxData.Id = 20;
    ajaxData.Name = "John Doe";

    multipleData.push(ajaxData);


    var ajaxData2 = {};
     ajaxData2.Id = 22;
    ajaxData2.Name = "Will Smith";;
    multipleData.push(ajaxData2);

    return multipleData;
}