选择列表的默认选择选项有问题吗？答案

【问题标题】：Issue with default selected option of a select list?选择列表的默认选择选项有问题吗？
【发布时间】：2012-11-09 14:10:37
【问题描述】：

我在选择列表中使用knockout options binding 和select2 plugin。最初，我不想默认选择任何选项，而是想显示类似“选择国家/地区..”的文本，并且最初应该选择此文本。为此，我使用了淘汰赛optionsCaption binding。它工作正常，但如果我在选择列表上应用 select2 插件，则不会选择初始默认文本。这是我的代码：

HTML

<select data-bind="options: array, optionsCaption: 'All'" size="1">
</select>

$('select').select2();

function VM(){
  this.array = 
    ['Afghanostan', 'Albania', 'Algeria', 'Argentina']; 
}

ko.applyBindings(new VM());

我还创建了一个JSFIDDLE。

如何解决这个问题？

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

试试这个代码

$('select').select2({
  placeholder: "ALL"
});


<select data-bind="options: array" size="1" style="width: 200px;">
    <option><option>
</select>

查看此链接http://jsbin.com/ivetel/19/edit

【讨论】：

它没有相同的“选定”外观，所以我仍然认为这个答案不正确。对于张贴者的情况来说，这可能是可以接受的，但我认为至少值得说明它有一个“占位符”/灰色的外观。

【解决方案2】：

这与“All”的值为“”有关。来自 select2 的来源：

    initSelection: function () {
        var selected;
        if (this.opts.element.val() === "") {
            this.close();
            this.setPlaceholder();
        } else {
            var self = this;
            this.opts.initSelection.call(null, this.opts.element, function(selected){
                if (selected !== undefined && selected !== null) {
                    self.updateSelection(selected);
                    self.close();
                    self.setPlaceholder();
                }
            });
        }
    }

如您所见，如果 element.val() === ''，它会短路。您需要修改 select2 的源以使用空值选项。

【讨论】：