与jQuery验证绑定的单选选项不起作用

我使用knockout将对象列表绑定到select.对象类可以包含任意数量的属性

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

这非常合适,我可以使用viewmodel.selectedCity().Name或viewmodel.selectedCity().加载子元素的值.

我的问题是jQuery验证.如果我保留上述语句,jQuery即使在选择后也不会重置错误.

我通过在bind中指定optionsValue来修复它,但是selectedCity返回标量值而不是整个对象.任何想法如何保持对象行为或以不同方式进行验证？

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

未指定optionsValue时,错误仍然存​​在：

这是我在selectedCity上的对象观察：

当指定optionsValue时,这是selectedCity上的Object Watch：

解决方法

问题是当将对象作为值处理时,选项元素的值设置为“”.由于这个原因,jQuery验证失败了.您可以编写绑定或包装器绑定到选项绑定,并将它们设置为一个值,但我不认为最好走这条路线.

一个不错的选择是存储值并使用dependentObservable来表示当前选定的对象.

这将是：

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);

有一个绑定像：

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

此处示例：http://jsfiddle.net/rniemeyer/EgCM3/

原文地址：https://www.jb51.cc/jquery/181013.html