knockoutjs: single select selected object

http://stackoverflow.com/questions/6743786/knockoutjs-single-select-options-binding-and-jquery-validation-not-working

by mrrodd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<form>
    <select id="TheProperty_City" name="TheProperty_City" class="required" 
    data-bind="options: cityList, 
    optionsText: 'Text', 
    optionsValue: 'Value',
    value: selectedCityValue, 
    optionsCaption: 'Choose a City...'" />
    <input type="submit" />
</form>

<div data-bind="text: selectedCityValue"></div>
<div data-bind="text: ko.toJSON(selectedCity)"></div>

CSS

input.error, select.error { border: 1px solid red; background-color: #FDC; }
label.error { display: block; color: Red; font-size: 0.8em; }

JavaScript

var viewModel = {
    cityList: [{
        Text: "Madison",
        Value: "MSN"},
    {
        Text: "Milwaukee",
        Value: "MKE"},
    {
        Text: "Green Bay",
        Value: "GRB"}],
    selectedCityValue: ko.observable(),
    save: function() {
        alert("saving: " + ko.toJSON(viewModel));
    }        
};

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

$(function() {
    ko.applyBindings(viewModel);

    console.log(viewModel.selectedCityValue());
    
    $("form").validate({
        submitHandler: function() {
            viewModel.save()
        }
    });

});