asp.net - Single select options binding with jQuery validation is not working

Question

I am binding a list of objects to a select using knockout. Object Class can have any number of properties

<select id="TheProperty_City" 
        name="TheProperty_City" 
        class="required" 
        data-bind="options: cityList, 
                   optionsText: 'Name',  
                   value: selectedCity, 
                   optionsCaption: '--select the city--'" />

This works perfectly fine and I can use viewModel.selectedCity().Name or viewModel.selectedCity().Value for loading child elements.

My issue is with jQuery validation. If I leave the statement as above, jQuery does not reset the error even after selection.

I fixed it with by specifying the optionsValue in the bind, but then the selectedCity returns the scalar value and not the entire object. Any idea how to preserve the object behavior or do the validation differently?

 <select id="TheProperty_City" 
         name="TheProperty_City" 
         class="required" 
         data-bind="options: cityList, 
                    optionsText: 'Name',  
                    optionsValue: 'Value', //added the optionsValue
                    value: selectedCity, 
                    optionsCaption: '--select the city--'" />

The error stays there when optionsValue is not specified:

Here's my Object Watch on selectedCity:

Here's an Object Watch on selectedCity when optionsValue is specified:

Answer 1

The issue is that when dealing with objects as the value, the option elements have their value set to "". The jQuery validation fails because of this. You could write a binding or wrapper binding to the options binding that goes through and just sets them to a value, but I don't think that it is preferable to go that route.

A decent option is to store the value and use a dependentObservable to represent the currently selected object.

It would be like:

var viewModel = {
    cityList: [{ Name: "Madison", Value: "MSN" }, { Name: "Milwaukee", Value: "MKE" }, { Name: "Green Bay", Value: "GRB" }],
    selectedCityValue: ko.observable()
};

viewModel.selectedCity = ko.dependentObservable(function() {
    var value = this.selectedCityValue();
    return ko.utils.arrayFirst(this.cityList, function(city) {
       return city.Value === value; 
    });
}, viewModel);

With a binding like:

<select id="TheProperty_City" name="TheProperty_City" class="required" 
    data-bind="options: cityList, 
    optionsText: 'Name', 
    optionsValue: 'Value',
    value: selectedCityValue, 
    optionsCaption: '--select the city--'" />

Sample here: http://jsfiddle.net/rniemeyer/EgCM3/