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）；这可以使用默认的绑定处理程序来完成。

将选择菜单状态（打开/关闭）存储在变量中；
使用event绑定在模糊/聚焦事件上切换此变量。如果是focus事件，则假定菜单已打开；如果是blur事件，则假定菜单已关闭。
将一个函数传递给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/

在淘汰赛限制下拉列表中显示价值而不是文字

1 个答案: