I am using knockoutjs to bind a select list. Here is a Sample , I want to get selected option text instead of selected value.

How to get it using knockoutjs ?

<select id="projectMenu" name="projectMenu" data-bind="   
        value: selectedProject,
        options:        projectFilters,
        optionsText:    'a', 
        optionsValue:   'b',   
        optionsCaption: '-- Select Project --'
    ">
    </select>
<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>

I am using knockoutjs to bind a select list. Here is a Sample , I want to get selected option text instead of selected value.

How to get it using knockoutjs ?

<select id="projectMenu" name="projectMenu" data-bind="   
        value: selectedProject,
        options:        projectFilters,
        optionsText:    'a', 
        optionsValue:   'b',   
        optionsCaption: '-- Select Project --'
    ">
    </select>
<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>

• javascript
• jquery
• knockout.js

• please provide a code example, not simply a link. – dokaspar Commented Oct 24, 2013 at 9:59
• 2 Possible duplicate? stackoverflow.com/questions/11112435/… – Henk Jansen Commented Oct 24, 2013 at 9:59
• 2 if duplicate then what?? that question never been answered, does it mean no body can ever ask? – sairfan Commented Oct 24, 2018 at 19:44

3 Answers 3

The simplest way to do it is to remove the optionsValue binding. When you don't sepcify the optionsValue binding, the entire item will be the selected value.

<select id="projectMenu" name="projectMenu" data-bind="   
        value: selectedProject,
        options:        projectFilters,
        optionsText:    'a',         
        optionsCaption: '-- Select Project --'
    ">
    </select>
<b>Selected Project:
<span data-bind="text: selectedProject() ? selectedProject().a : 'no selection '"></span>

See fiddle

As far I am concerned it is not possible with just a simple binding. But You can easily create computedObservable which choose optionText based on optionValue

vm.selectedOption= ko.computed(function () { 
   for (var i = 0; i < this.projectFilters().length; i += 1) {
       var data = this.projectFilters()[i];
       if (data.a === this.selectedProject()) {
           return data.b;
       }
   }
   return null;
}, vm);

vm.selectedCountryName = ko.computed(function () {
        var text = '';
        ko.utils.arrayForEach(vm.countries(), function (item) {
            if (item.CountryId == vm.selectedCountry()) {
                text = item.CountryName;
                return;
            }
        });
        return text;
    });