Knockout.js - Get text selected value in a drop-down menu

Question

I would like to know how to get the value of the TEXT selected from the dropdown menu, just remember that my drop down menu has the fixed data and are not populated by a "ko.observableArray ()". Any ideas?

When I select an option want to have: Value and Text selection.

<p>
    Select a car:
    <select data-bind="value: selectedValue, optionsText:???">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

My ko ViewModel:

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable()
};

ko.applyBindings(viewModel);

See this Fiddle: JSFiddle

Create an array of the text/values and bind to that. Use knockout as it was intended, don't try to work around misuse. — Jeff Mercado, Dec 02 '14 at 18:21

lante · Answer 1 · 2014-12-03T15:38:29.513

I dont know if there is a possible solution with Knockout.js. I let you two possible solutions:

Solution 1

You can use a bit of native Javascript to achieve your goal:

viewModel.selectedValue = ko.observable();
viewModel.selectedText = ko.computed(function () {
    var elem = document.querySelector("select option[value=" + viewModel.selectedValue() + "]");
    return elem && elem.innerHTML;
});

As you see, you can take the "value" and use it to return the DOM element that meets your requirements. Of course you can replace select with an id, if you need it.

Check this fiddle to see it working.

Solution 2

The Knockout way of doing this is having an array with all elements to be populated:

var cars = [{ id: 'volvo', name: 'Volvo' }, { id: 'saab', name: 'Saab' }, { id: 'mercedes', name: 'Mercedes' }, { id: 'audi', name: 'Audi' }];

After that, it depends on what you need when you say "value", remember that you are binding an object, not a key/value list:

HTML:

<select data-bind="options: cars, value: selectedCar, optionsText: 'name'"></select>

And your JS:

selectedCar = ko.observable();
selectedValue = ko.computed(function () { 
    return selectedCar() && selectedCar().id; 
});
selectedText =  ko.computed(function () { 
    return selectedCar() && selectedCar().name; 
});

This way you will have separately your "value" and your "text" (better called id and name properties) into two computed observables.

See the fiddle working.

Thanks, I already read and even have a fiddle that does this. That question was not posted to know if you have some other way of doing this. So much so that I left this clear on the issue:. "... Que remember my drop down menu has the fixed date and are not populated by the 'ko.observableArray()' " Thanks again. — Igor, Dec 03 '14 at 10:29
Yeah its good! I had seen something like this in my searches: http://stackoverflow.com/a/11170582/2145555, but using jQuery selector. Thanks for the time and response. — Igor, Dec 03 '14 at 16:07
[Vainilla JS](http://vanilla-js.com/) > jQuery :) Please mark this as the correct answer if it meets your needs. — lante, Dec 03 '14 at 17:19
if we go by this way, setting up of value back from the db is not possible, because we are not using the optionsValue binding — threeleggedrabbit, Mar 05 '15 at 09:48

score 3 · Answer 2 · answered Jan 14 '16 at 11:29

I have just had to acheive this and I have added a ko.computed function to retrieve the selected text from the options as below:

// assume that options has been populated with Key / Value pairs
self.options = ko.observableArray([]);

self.selectedType = ko.observable(null);
self.selectedTypeText = ko.observable(null);
self.selectedType.subscribe(function (newValue) {
    if (newValue) {
        self.checkAccess(newValue);

        $.each(self.options(), function (i, item) {
            if (item.Key === newValue) {
                self.selectedTypeText(item.Value);
            }
        });
    }
});

score 2 · Answer 3 · edited May 23 '17 at 12:18

2

You have to work with options binding for this. And like Jeff says, don't misuse.

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable(),
    carOptions : ['Volvo','Saab', 'Mercedes', 'Audi']
};

ko.applyBindings(viewModel);

Markup:

<p>
    Selecte a car:
    <select data-bind="value: selectedValue, options: carOptions">

    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

This is the simplest way to do so. For more complicated scenarios visit the docs.

JsFiddle 1, JsFiddle 2

edited May 23 '17 at 12:18

Community

1
1

answered Dec 02 '14 at 18:37

deostroll

11,661
21
90
161

Now I understand, it is not possible to do this! Thanks for the reply. But still is not listing the two values ... how can we do? – Igor Dec 02 '14 at 18:48
Thanks, I already read and even have a fiddle that does this. That question was not posted to know if you have some other way of doing this. So much so that I left this clear on the issue:. "... Que remember my drop down menu has the fixed date and are not populated by the 'ko.observableArray()' " Thanks again. – Igor Dec 02 '14 at 19:09

score 0 · Answer 4 · answered Jan 27 '20 at 16:05

here is my solution, define a variable in js file like selectedValue (it is observable), then decorate your select with this item.

 <select data-bind="options: listOfData, 
optionsText: function (item) { return item.propertyForText; }, optionsValue: 
function(item) { return item.propertyForValue; }, 
value: selectedValue">
</select>

Knockout.js - Get text selected value in a drop-down menu

4 Answers4