使用带有占位符的 select2.js 我不能 select 第一项

Question

我有一个 <select> 列表，我正在使用 select2.js 设置样式。在大多数情况下，一切正常，但是，当使用占位符时，用户会下拉列表，然后尝试 select 他们无法做到的列表中的第一项。如果用户 selects 除了第一项之外的任何项目然后返回并且 selects 第一项工作正常。就好像第一项已经 selected（它已经突出显示）但不是真的（因为列表的值为空并且显示了占位符）。

HTML

    <select id="selectBox"></select>

绑定JS

$("#selectBox").select2({
    placeholder: "Select an item",
    width: '267px' });

填充 JS

var showThings = function() {

    var $selectBox = $('#selectBox');

    $selectBox.empty();

    blah.executeRequest('getThings', function(result) {

            $(result.sort(SortByName)).each(function(index, user) {

                var asOption = [];

                asOption.push('<option value ="' + user['id'] + '">' +
                    user['name'] + '</option>');


                if (asOption.length > 0) {
                    $selectBox.append(asOption.join('\n'));
                }
            });
        }
    );
};

"executeRequest" 只是从一些 Java 代码中获取数据，填充列表工作正常，但我想我会包含代码以便可以看到列表数据的来源来自.

如果有人对此有任何想法，或者已经经历过并且知道如何解决它，我将不胜感激。

谢谢，

克里斯

Answer 1

在推送 "real" 值之前，尝试在 select 元素的开头添加一个空的 <option></option>。

更新：我给你写了一个JSFiddle example

使用带有占位符的 select2.js 我不能 select 第一项

With select2.js with a placeholder I can't select the first item

javascript

jquery

jquery-select2