javascript - 设置默认数据绑定(bind)选项的值

Question

假设我们有以下数据绑定(bind)

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

我想设置optionsCaption的默认值。

(当用户选择“choose..”时selectedCountry的值)

https://jsfiddle.net/3z2zzy0b/2/

Answer 1

不能为 optionsCaption 选择分配任意选项值(无论如何，开箱即用)。需要考虑的几个选项，其中一些比其他选项更迂回:

1. 只需在您的国家/地区数组中添加另一个选项，例如:

   self.availableCountries = ko.observableArray([
           'Choose...',
           'United States',
           'Mexico',
           'Canada'
   ]);
   

   然后在 selectedCountry == 'Choose...' 时检查一些逻辑。

2. 与 1 类似，将数组转换为对象数组:

   self.availableCountries = ko.observableArray([
           { text: 'Choose...', value: 'MY_DEFAULT' },
           { text: 'United States' value: 'United States' },
           { text: 'Mexico', value: 'Mexico' },
           { text: 'Canada', value: 'Canada' }
   ]);
   

   并绑定(bind)为:

   <select data-bind="options: availableCountries,
           value: selectedCountry,
           optionsText: text,
           optionsValue: value">
   </select>
   

3. 如果您不想在数组中使用非国家/地区元素(您可能也不想)，您可以使用 optionsAfterRender 来解决它:

   <select data-bind="options: availableCountries,
           value: selectedCountry,
           optionsCaption: 'Choose...',
           optionsAfterRender: function(item, value) {
                   item.value = value || 'MY_DEFAULT';
           }">
   </select>
   

   此特定示例会将任何空白值设置为“MY_DEFAULT”。您还可以检查 item 中的文本 == 'Choose...'。