optionsCaption 在编辑时显示而不是选定的值

Question

我有一个包含三个值的选择框。当没有 selectedPhoneType 值时，我想添加“请选择”的文字。

我尝试将optionsCaption: 'Please Select' 添加到数据绑定属性。

问题是，当我执行此操作并单击页面上的编辑时，PhoneType 选择会从所选电话类型恢复为“请选择”文本，而不是显示正确的值。当我删除 optionsCaption 时，它会在编辑页面上显示正确的值。

当应该显示 selectedPhoneType 的值时，如何让它停止显示“请选择”？

        <select id="PhoneType" data-bind="options: $root.phoneTypes, optionsText: 'phoneTypeDescription', optionsValue: 'phoneTypeId',  value: $root.selectedPhoneType, disable: phoneId() > 0" required></select>

查看模型

module ViewModels {
    export class Phone {
        constructor() {
            // Set up validation options
            ko.validation.init({
                insertMessages: false,
                decorateElement: true,
                errorElementClass: "input-validation-error"
            });

            var service = new Services.PhoneService();

            Q.all([
                service.getByFid()
                .then((phones: Array<Models.Phone>) => {
                    this.phones(phones);
                })
            ]).then(() => {
                // Populate drop downs based on static data
                var phoneTypes = Enums.PhoneTypeHelper.createArray();
                this.phoneTypes(phoneTypes);

                // This will diplay grid once the results have returned
                $("#sub-content").css("display", "block");
            }).fail((error: any) => {
                // Add this error to errors
                this.errors([error]);
            }).fin(() => {
                $("#loading").css("display", "none");
            });
        }

        phones = ko.observableArray<Models.Phone>();
        phoneTypes = ko.observableArray<Models.PhoneTypeLookup>();
        selectedPhoneType = ko.observable<number>().extend({ required: { message: "Please select a phone type." } });
        selectedPhone = ko.observable<Models.Phone>();
        template = ko.observable<string>("mainTemplate");
        errors = ko.observableArray<string>();

        // Used to handle the click event for Edit
        edit = (phone: Models.Phone) => {
            var phoneTypes = Enums.PhoneTypeHelper.createArrayWith(phone.phoneTypeId());

            this.phoneTypes(phoneTypes);
            this.selectedPhone(phone);
            this.template("editTemplate");

            // Add input masks
            $("#PhoneNumber").mask("999-999-9999", { placeholder: "###-###-####" });
            $("#PhoneExtension").mask("9999", { placeholder: "####" });
        }

Answer 1

我将它添加到编辑部分并且它有效。感谢 nemesv 的建议。

this.selectedPhoneType(phone.phoneTypeId());