Javascript 将选择列表添加到淘汰VM不填充选择值

我试图学习一点knockout.js，所以我正在浏览网站上的示例，特别是联系人示例。（）

我试图通过添加一个属性为“ContactType”的选择列表来扩展这个示例

ContactType是包含2个对象的基本列表

我创建了一个示例分支，并对其进行了略微扩展

HTML

联络
名字
姓
接触式
电话号码

添加联系人
保存到JSON

我有两个问题，我不知道我做错了什么

加载页面时，选择列表未显示正确的值。相反，它只是显示“请选择”值

当我尝试保存记录时，从选择列表中选择的值不会被保存

---

我是不是做错了什么

问题是您未正确设置

值

绑定。而不是

value:'contactTypeId'

，此时它应该是

value:contactTypeId

，不带引号

<select class="form-control" data-bind="options: $root.contactTypes,
    optionsText: 'type',
    optionsValue: 'id',
    value: contactTypeId,                                    
    optionsCaption: 'Please Select...'">
</select>

---

请包含JSFIDDLE中selectadded html的html。您希望将所选项目设置为什么可观察项？确定。我没有将选择列表设置为contactTypeId。我已经更新了代码，将contactType设置为select元素的值，但是没有乐趣

<div class='liveExample'>
     <h2>Contacts</h2>

    <div id='contactsList'>
        <table class='contactsEditor'>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Contact Type</th>
                <th>Phone numbers</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>
                        <select class="form-control" data-bind="options: $root.contactTypes,
                                    optionsText: 'type',
                                    optionsValue:'id',
                                     value:'contactTypeId',
                                    optionsCaption: 'Please Select...'"></select>
                    </td>
                    <td>
                        <table>
                            <tbody data-bind="foreach: phones">
                                <tr>
                                    <td>
                                        <input data-bind='value: type' />
                                    </td>
                                    <td>
                                        <input data-bind='value: number' />
                                    </td>
                                    <td><a href='#' data-bind='click: $root.removePhone'>Delete</a>

                                    </td>
                                </tr>
                            </tbody>
                        </table> <a href='#' data-bind='click: $root.addPhone'>Add number</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>
        <button data-bind='click: addContact'>Add a contact</button>
        <button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
    </p>
    <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'></textarea>
</div>

<select class="form-control" data-bind="options: $root.contactTypes,
    optionsText: 'type',
    optionsValue: 'id',
    value: contactTypeId,                                    
    optionsCaption: 'Please Select...'">
</select>

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