(KnockoutJS) How to reset select statement

Question

I have select options populated by KnockoutJS

Related part of HTML:

<label>Gender:</label> 
<select data-bind="options: gender, value: selectedGender, optionsText: 'gender'"></select>

And related part of app.js:

this.gender = ko.observableArray([{gender: '', value: ''},{gender: 'F', value: 'female'},{gender: 'M', value: 'male'}]);
this.selectedGender = ko.observable();

kn.constructorEnd(this);

var self = this;
this.selectedGenderVal = ko.computed(function () { 
    return self.selectedGender() && self.selectedGender().value; 
})

Then I have added data-bind on click event to my modal close icon. All observable data are cleared except that select above which I try to clear doing that:

self.selectedGender("");

Any clue why is not setting it to an empty value?

Jason Spake Jason Spake · Accepted Answer · 2017-05-31T17:12:38

Your select control is set up without a "selectedValue" binding, so by default the entire option object will be stored in your "selectedGender" observable. Therefore when you try to select the empty-string value the select control doesn't know how to translate that into one of the options objects in your array.

If you add the optionsValue: 'gender' binding then it knows to compare values using the string value in the gender observable rather than comparing whole objects against each other.

(KnockoutJS) How to reset select statement

1 Answers