CODEWITHSUNDEEP
knockout.jshtml-selectshow-hide
methon.dagger
methon.dagger

Reputation: 513

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

I'm trying to get a drop-down list field to show or hide a certain div element based on the selected displayed text of the drop-down and not its value. I have a simple example below that shows it works when you set the data-bind to value:

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

But the drop-down field becomes an empty list when you set it to text:

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

Below is my complete example:

    <!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>

Upvotes: 0

Views: 2939

Answers (3)

Roy J
Roy J

Reputation: 43881

A custom binding that tracks when the value of the select changes and pulls its text component will work for you:

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();
    }
};

This ensures that the text variable is tightly coupled to the value variable, which setting a change event handler doesn't do. My fiddle programmatically changes the value variable. Using selectedTextA as the binding handler causes the expected update, while selectedTextB does not.

http://jsfiddle.net/f1bdr00s/

Upvotes: 2

Roy J
Roy J

Reputation: 43881

The text binding does not apply to selects. There is no binding to track the label instead of the value. If you didn't want to write a custom binding for that, you would need to write a function to lookup the name from the code. This assumes you make the options part of your code, rather than your 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>

The code could be:

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);

Upvotes: 0

Michael Best
Michael Best

Reputation: 16688

The value binding will only work with the value. If you want to bind to the text, you'll need a custom binding. Something like this:

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);
        });
    }
};

Upvotes: 1

Related Questions