Options dropdownlist binding in knockoutjs

KnockoutJS Options Bindings using mvc 4 jquery


This is a simple example, to bind the options or dropdownlis in knockout js.

In the 1st step, write the view code which are give below:

<select data-bind="options: subscriptionsList, value:ID, optionsText:'FriendlyName' "></select>



In the 2nd step, write the viewModel code and bind to viewModel code within document dot ready function.

<script type="text/javascript">

    function subscription(id, name) {
        var self = this;
        self.ID = ko.observable(id);
        self.FriendlyName = ko.observable(name);
    }

    function ViewModel() {
        var self = this;
        self.ID = ko.observable();
        self.subscriptionsList = ko.observableArray();

        var subscriptions = [

            {
            ID: '1',
            FriendlyName: 'Friendly 1'
            },
            {
            ID: '2',
            FriendlyName: 'Friendly 2'
            }
        ];

        $.each(subscriptions, function (index, item) {
            self.subscriptionsList.push(new subscription(item));
        });     
    }

    $(document).ready(function () {
        ko.applyBindings(new ViewModel());
    });

</script>


Thanks,