Knockout下拉列表如何指定默认值？

这个问题我之前也踩过坑！你猜的完全没错——问题根源就是对象引用不一致：你给selectedCountry新建的new Country("USA", 320000000)，和availableCountries数组里的那个USA是两个完全独立的对象，Knockout没法识别它们对应同一个选项，所以默认选中的功能就失效了。

给你两种简洁有效的解决方法，优先选第一种：

方法一：直接复用数组里的已有对象（最推荐） #

不要重新创建新的Country实例，而是从availableCountries对应的数组里取出你要默认选中的对象，赋值给selectedCountry就行：

var Country = function(name, population) { 
  this.countryName = name; 
  this.countryPopulation = population; 
}; 

// 先把所有国家实例存到一个变量里
var countryList = [
  new Country("UK", 65000000),
  new Country("USA", 320000000),
  new Country("Sweden", 29000000)
];

var viewModel = {
  availableCountries: ko.observableArray(countryList),
  // 从已有的列表里找到USA对象赋值
  selectedCountry: ko.observable(countryList.find(country => country.countryName === "USA"))
};

ko.applyBindings(viewModel);

如果你的运行环境不支持ES6的Array.find，可以用filter替代：

selectedCountry: ko.observable(countryList.filter(country => country.countryName === "USA")[0])

方法二：自定义选项比较器（适合复杂场景） #

如果因为某些原因你必须创建新对象，那可以给Knockout指定一个自定义的比较函数，告诉它怎么判断两个对象是同一个选项：

var viewModel = {
  availableCountries: ko.observableArray([
    new Country("UK", 65000000),
    new Country("USA", 320000000),
    new Country("Sweden", 29000000)
  ]),
  selectedCountry: ko.observable(new Country("USA", 320000000))
};

// 自定义比较器：通过countryName判断是否为同一个国家
ko.bindingHandlers.options.after = function(element, valueAccessor) {
  var options = valueAccessor();
  options.valueAllowUnset = true;
  options.compare = function(a, b) {
    return a && b && a.countryName === b.countryName;
  };
};

ko.applyBindings(viewModel);

不过这种方法没必要，第一种直接复用已有对象的方式更简洁高效，完全能解决你的问题。

对应的HTML部分保持不变即可：

<select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>

内容的提问来源于stack exchange，提问作者Laurence Frost