填充下拉菜单-从服务器中选择的选项

Question

I am currently using knockout.js framework. I have taken a basic contacts form example and modified it to my own needs. Each contact person has a status of ACTIVE or INACTIVE . In the status dropdown menu, I would like to show the selected status for the contact. Instead of getting two options, I am getting an usual select option list. How can I properly display a dropdown menu in knockout.js? DEMO

Edit per @haim770:

    var ContactsModel = function (contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
    return {
            firstName: contact.firstName,
            lastName: contact.lastName,
            selectedOptionValue : contact.selectedOptionValue,
            phone: contact.phone,
            alt_phone: contact.alt_phone,
            main1: ko.observable(contact.main1),
            main2: ko.observable(contact.main2)
        };
    }));

    self.statusList = ['ACTIVE', 'INACTIVE'];

    self.addContact = function () {
        self.contacts.push({
            firstName: "",
            lastName: "",
            selectedOptionValue : ko.observable("ACTIVE"),
            phone: "",
            alt_phone: "",
            main1: false,
            main2: false
        });
    };

    self.removeContact = function (contact) {
        self.contacts.remove(contact);
    };

    self.addPhone = function (contact) {
        contact.phones.push({
            number: ""
        });
    };

    self.removePhone = function (phone) {
        $.each(self.contacts(), function () {
            this.phones.remove(phone)
        })
    };

    self.save = function () {
            self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
        };


    self.lastSavedJson = ko.observable("");


};

$.getJSON("functions/getPerson.php", function(allData) {
          ko.applyBindings(new ContactsModel(allData));
});

HTML

<li>
<select data-bind="options: $root.statusList, value: selectedOptionValue"></select>
</li>

JSON

[{"firstName":"James","lastName":"Southerland","phone":"1234567890","statusList":"ACTIVE","alt_phone":"1234567890","main1":true,"main2":false},{"firstName":"Tina","lastName":"Turner","phone":"1234567890","statusList":"INACTIVE","alt_phone":"1234567890","main1":false,"main2":true}]

Answer 1

1. The JSON returned from the server is malformed. Instead of setting the actual contact status in the selectedOptionValue (as you do in your addContact method), you return it as statusOptionValues field.

2. No need to include the 'Active/Inactive' array ( statusOptionValues ) in every contact. Try this:

self.statusList = ['ACTIVE', 'INACTIVE'];

Then change your binding declarations appropriately:

<select data-bind="options: $root.statusList, value: selectedOptionValue"></select>

3. You better rely on a boolean field instead of array of string :

contact.isActive = ko.observable(true);