Edit in JSFiddle

<select data-bind="options: CreditCards, optionsText: 'CardNumber',
    optionsValue: 'CardId', value: SelectedCard, optionsCaption: '請選擇'"></select>
<span data-bind="text: SelectedCardText"></span> selected.

function ViewModel() {
    var self = this;
    self.CreditCards = ko.observableArray([{
        "CardId": 1,
            "CardNumber": "1234-5678-1234-0001",
            "CardHolder": "Pete"
    }, {
        "CardId": 2,
            "CardNumber": "1234-5678-1234-0002",
            "CardHolder": "Claire"
    }, {
        "CardId": 3,
            "CardNumber": "1234-5678-1234-0003",
            "CardHolder": "Pudding"
    }]);
    self.SelectedCard = ko.observable();
    self.SelectedCardText = ko.computed(function () {

        var search = self.SelectedCard();

        if (!search) {

            return null;

        } else {

            var matchedItem = ko.utils.arrayFirst(self.CreditCards(), function (item) {
                return item.CardId == search;
            });

            return matchedItem.CardNumber;
        }
    });
}

ko.applyBindings(new ViewModel());