Pinakin Shah Pinakin Shah - 6 months ago 12
Javascript Question

Single select options binding with jQuery validation is not working

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:

Without the OptionsValue

Here's my Object Watch on
selectedCity
:

viewModel.selectedCity() in watch returns an object

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

With OptionsValue

Answer

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/