Knockout -如何订阅多个下拉菜单(选择)并绑定到模型

javascript爱好者和开发者，

我如何将多个下拉框绑定到一个模型，并为每个下拉框单独订阅其更改事件?

我有一个基本的形式…您可以在jsFiddle: http://jsfiddle.net/2Mnr3/7/中看到它
为什么当我选择一个字段时，所有的选择字段一起更改?我怎么能单独做呢?

<div class='liveExample'> 
<h2>Orders</h2>
<div id='contactsList'>
    <table class='contactsEditor'>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Service</th>
        </tr>
        <tbody data-bind="foreach: contacts">
            <tr>
                <td>
                    <input data-bind='value: firstName' />
                    <div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div>
                </td>
                <td><input data-bind='value: lastName' /></td>
                <td>
                    <table>
                        <tbody data-bind="foreach: services">
                            <tr>
                                <td>
                                    <select data-bind='options: catalog, value: $root.selectedId, optionsText: "name", optionsCaption: "Select..."'> </select>
                                </td>
                                <td>
                                    <div data-bind="visible: $root.selectedId()">
                                        <span data-bind='text: $root.selectedId.price'> </span>
                                        <!--<span data-bind='text: "asd"'> </span>-->
                                    </div>
                                <td>
                                <a href='#' data-bind='click: $root.removeService'>Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addService'>Add service</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<p>
    <button data-bind='click: addContact'>Add customer </button>
    <button data-bind='click: save, enable: contacts().length > 0'>JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled
          ='disabled'> </textarea>

和Javascript代码与Knockout库:

function formatCurrency(value) {
    console.log(value);
    return value;
}
var serviceTypes = [
        { name: "Service One", id: "1", price: "10 USD"},
        { name: "Service Two", id: "2", price: "9 USD"},
        { name: "Service Three", id: "3", price: "25 USD"},
        { name: "Service Four", id: "4", price: "42 USD"}
      ];
var initialData = [
{ firstName: "John", lastName: "Carter", services: [{ catalog: serviceTypes, id: 0 }, { catalog: serviceTypes, id: 2 }]
}
];
   function ContactsModel(contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
        return { id: contact.id, firstName: contact.firstName, lastName: contact.lastName, services: ko.observableArray(contact.services) };
    }));

self.serviceTypes = ko.observableArray(serviceTypes);
self.selectedId = ko.observable('1');
self.selectedId.subscribe(function(item){
    return ko.utils.arrayFirst(serviceTypes, function(service) {
        return service;
    });
});
self.addContact = function() {
    self.contacts.push({
        firstName: "",
        lastName: "",
        services: ko.observableArray([
            {
                catalog: this.serviceTypes,
            }])
    });
};
self.removeContact = function(contact) {
    self.contacts.remove(contact);
};

self.addService = function(contact) {
    contact.services.push({
        catalog: self.serviceTypes,
    });
};
self.removeService = function(phone) {
    $.each(self.contacts(), function() { this.services.remove(phone) })
};
self.save = function() {
    self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new ContactsModel(initialData));