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/

Answer 2

Quite neat solution would be to add optionsAfrerRender parameter to options binding. Assuming that in 'selectedCity' object there is a field 'cityId' you could assign it to an option value. Please check the following solution based on your example:

 <select id="TheProperty_City" 
    name="TheProperty_City" 
    class="required" 
    data-bind="options: cityList, 
               optionsText: 'Name',
               value: selectedCity,
               optionsAfterRender: function(option, item) 
                                        { option.value = item.cityId; }
               optionsCaption: '--select the city--'" />

Using this approach you will get working both knockout options binding and jquery validation.

Answer 3

The above answer works with one caveat. The first select value bound ("--select the city--") will be undefined causing an error.

If you modify the code to handle this it will work.

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

Note: I've stripped out everything from the ViewModel except for the setOptionValue method for brevity.

<script type="text/javascript">
var vm = {
    setOptionValue: function(option, item) {
        if (item === undefined) {
            option.value = "";
        } else {
            option.value = item.id;
        }
    }
};
ko.applyBindings(vm);