设置默认数据绑定选项的值

Set the value of the default data-bind options

本文关键字：选项 数据绑定 默认 设置      更新时间：2023-09-26

假设我们有以下数据绑定

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

我想设置optionsCaption的默认值。

(用户选择"choose.."时selectedCountry的值)

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

不能为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 as:

    <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的文本== '选择…'。

如果要设置默认值，请使用选项中的value。

<select data-bind="options: availableCountries,
    value: selectedCountry()">
</select>

现在美国将从选项中设置。

更新小提琴:https://jsfiddle.net/3z2zzy0b/3/

相关文章：