使用挖空来显示或隐藏选定的下拉显示文本而不是其值的元素？

Question

我正在尝试获取一个下拉列表字段，以根据下拉列表的选定显示文本而不是其值来显示或隐藏某个 div 元素。我在下面有一个简单的例子，它表明当你将 data-bind 设置为 value:

时它是有效的

<DIV data-bind="visible: chosenCountry() === 'GBR'">
<SELECT id="countryList" data-bind="value: chosenCountry">

但是当你将它设置为text时，下拉字段变成了一个空列表：

<DIV data-bind="visible: chosenCountry() === 'United Kingdom'">
<SELECT id="countryList" data-bind="text: chosenCountry">

下面是我的完整示例：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE></TITLE>
  </HEAD>
  <BODY>
    <DIV data-bind="visible: chosenCountry() === 'GBR'">
      You will see this message only when the chosen country is the United Kingdom.
    </DIV><SELECT id="countryList" data-bind="value: chosenCountry">
      <OPTION value="AUS">
        Australia
      </OPTION>
      <OPTION value="BHS">
        Bahamas
      </OPTION>
      <OPTION value="GBR">
        United Kingdom
      </OPTION>
    </SELECT> 
    <SCRIPT src="knockout-3.3.0.js" type="text/javascript">
    </SCRIPT>
    <SCRIPT type="text/javascript">        
        var viewModel = {
                chosenCountry: ko.observable("GBR")
        };

                        ko.applyBindings(viewModel);
    </SCRIPT>
  </BODY>
</HTML>

Answer 1

value 绑定仅适用于该值。如果要绑定到文本，则需要自定义绑定。像这样：

ko.bindingHandles.selectedText = {
    init: function (element, valueAccessor) {
        ko.utils.registerEventHandler(element, "change", function () {
            var modelValue = valueAccessor(),
                selectedIndex = element.selectedIndex;
            modelValue(selectedIndex >= 0 ? element.options[selectedIndex].text : undefined);
        });
    }
};

Answer 2

text 绑定不适用于选择。没有绑定来跟踪标签而不是值。如果您不想为此编写自定义绑定，则需要编写一个函数来从代码中查找名称。这假设您将选项作为代码的一部分，而不是 HTML.

<DIV data-bind="visible: chosenCountryName() === 'United Kingdom'">You will see this message only when the chosen country is the United Kingdom.</DIV>
<SELECT id="countryList" data-bind="options:countryOptions, optionsText: 'text', optionsValue: 'value', value: chosenCountry"></SELECT>

代码可以是：

var viewModel = {
    countryOptions: [
        {text: 'Australia', value: 'AUS'},
        {text: 'Bahamas', value: 'BHS'},
        {text: 'United Kingdom', value: 'GBR'}

        ],
    chosenCountry: ko.observable("GBR")
};

viewModel.chosenCountryName = ko.computed(function () {
    var code = viewModel.chosenCountry();
    for (var i = 0; i < viewModel.countryOptions.length; ++i) {
        var item = viewModel.countryOptions[i];
        if (item.value === code) return item.text;
    }
});

ko.applyBindings(viewModel);

Answer 3

跟踪 select 的值何时更改并提取其文本组件的自定义绑定将为您工作：

ko.bindingHandlers.selectedTextA = {
    init: function (element, valueAccessor, allBindings) {
        var valueBinding = allBindings().value;
        valueBinding.subscribe(function () {
            var idx = element.selectedIndex,
                dest = valueAccessor();
            dest(idx >= 0 ? element.options[idx].text : undefined);
        });
        valueBinding.notifySubscribers();
    }
};

这可确保文本变量与值变量紧密耦合，而设置更改事件处理程序则无法做到这一点。我的 fiddle 以编程方式更改值变量。使用 selectedTextA 作为绑定处理程序会导致预期的更新，而 selectedTextB 不会。

http://jsfiddle.net/f1bdr00s/

使用挖空来显示或隐藏选定的下拉显示文本而不是其值的元素？

Use knockout to show or hide element by selected drop-down displayed text and not its value?

html-select

show-hide

knockout.js