Question

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

我尝试将optionsCaption: 'Please Select'添加到data-bind属性。

问题在于，当我执行此操作并单击页面上的编辑时，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());

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

1 个答案: