CODEWITHSUNDEEP
knockout.js
Sachin Kainth
Sachin Kainth

Reputation: 46760

Display a selected value in a dropdown using Knockout

Here is a snippet from my JSON

{
  "PreferredLanguage":"Italian",
  "PreferredLanguageDisplay":"Italiano",
   "Languages":[
     {"Selected":false,"Text":"English (UK)","Value":"0"}, 
     {"Selected":false,"Text":"English (US)","Value":"1"}, 
     {"Selected":true,"Text":"Italiano","Value":"2"}, 
     {"Selected":false,"Text":"Français","Value":"3"}
   ]
}

Now, I am binding a dropdown in Knockout to Languages thus:

<div class="item">
    <select data-bind="foreach: Languages(), value: PreferredLanguage">
        <option data-bind="text: Text"></option>
    </select>
</div>

This all works but I am trying to do one more thing. By default the first value in the Languages array selected but I want the option whose text matches PreferredLanguageDisplay to be selected.

I tried using the if binding butcouldn't get that to work. Any ideas?

Upvotes: 1

Views: 1424

Answers (2)

Damien
Damien

Reputation: 8987

You should use the options binding as follow :

View : 

<select data-bind="options: Languages, value: PreferredLanguage, optionsText: 'Text', optionsValue : 'Value'">
</select>

View model :

var vm = {

    "PreferredLanguage": ko.observable('2'), // Value of Italiano
    "PreferredLanguageDisplay": "Italiano",
        "Languages": [{
        "Text": "English (UK)",
            "Value": "0"
    }, {
        "Text": "English (US)",
            "Value": "1"
    }, {
        "Text": "Italiano",
            "Value": "2"
    }, {
        "Text": "Français",
            "Value": "3"
    }],

};
ko.applyBindings(vm);

See fiddle

Upvotes: 2

user985351
user985351

Reputation: 197

Expanding on what @Anders suggested. Here is the actual doc:

Upvotes: 0

Related Questions