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

时间:2015-05-26 13:25:54

标签: javascript jquery knockout.js

让我们假设我们有以下数据绑定

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

我想设置optionsCaption的默认值。

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

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

2 个答案:

答案 0 :(得分:4)

无法为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' }
    ]);
    

    并绑定为:

    <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是否有文字=='选择...'。

答案 1 :(得分:0)

如果要设置默认值,请使用选项的value

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

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

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