在 Knockout-bound 下拉列表中显示值而不是文本

Question

我有一个 HTML 下拉菜单，我在其中使用 Knockout.js 绑定选项。通过下拉菜单，您可以选择 ISO 国家/地区代码。在（短）下拉列表中，我想将两个字母的国家代码显示为文本。只有当用户打开下拉菜单时，国家的全名才会出现。比如：

+=======+===+
| DE    | v |
+=======+===+
| Germany   |
| England   |
| France    |
| Spain     |
| USA       |
+-----------+

现在，我的 HTML 代码如下所示：

<select class="form-control w-25" data-bind="
    value: customAddress.country,
    options: countryList,
    optionsText: 'name',
    optionsValue: 'code',
    optionsCaption: 'Country'
" required></select>

显然，如果您选择它，下拉列表现在会显示“德国”。我找到了一些想法，可以在 onBlur 事件中使用 jQuery 替换下拉列表的显示文本。但我担心，这会干扰敲除的数据绑定机制（所有属性都是可观察的）。

我该如何解决？我需要自定义绑定吗？

Answer 1

您不一定需要自定义绑定处理程序（当然也不需要求助于 jQuery）；这可以使用默认绑定处理程序来完成。

1. 将选择菜单状态（打开/关闭）存储在变量中；
2. 使用event 绑定在模糊/焦点事件上切换此变量。如果是focus 事件，我们假设菜单是打开的；如果是blur 事件，我们假设菜单已关闭。
3. 将函数传递给optionsText，该函数将返回代码或国家/地区，具体取决于所述变量的值。

JS：

function ViewModel() {
  var vm = this;

  vm.countries = [{
      code: 'DE',
      country: 'Germany'
    },
    {
      code: 'NL',
      country: 'The Netherlands'
    },
    {
      code: 'BE',
      country: 'Belgium'
    }
  ];

  vm.countrySelectIsOpen = ko.observable(false);
  vm.selectedCountry = ko.observable();

  vm.getOptionsText = function(item) {
    return item[vm.countrySelectIsOpen() ? 'country' : 'code'];
  }

  vm.toggleCountrySelectStatus = function(data, event) {
    vm.countrySelectIsOpen(event.type === 'focus');
  }
}

ko.applyBindings(new ViewModel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select class="form-control" data-bind="
        options: countries,
        optionsText: getOptionsText,
        optionsValue: 'code',
        optionsCaption: 'Country',
        value: selectedCountry,
        event: {
            blur: toggleCountrySelectStatus,
            focus: toggleCountrySelectStatus
        }
    "></select>

小提琴：https://jsfiddle.net/thebluenile/hf70kg84/