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,

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2