无法在 select2 保管箱中 select 第一个选项

Question

使用 select2.js 我有一个下拉菜单，除了一件事外效果很好：加载时我无法单击下拉菜单中的第一个选项并将其显示为当前选择。单击第一个选项时，没有任何反应，如果下拉列表失去焦点，占位符将填充该框。如果选择了 40 个选项中的任何其他选项，该值文本将显示在下拉框中，我可以在我的应用程序中使用该值。

选择一个选项（第一个选项除外）后，我再次单击第一个选项，然后第一个选项值显示在框中，我可以毫无问题地使用它。此问题仅在加载时发生。

JS

$('.selectArea').select2({
        placeholder: 'Area #',
        allowClear: true,
        disabled: false
    });

我已经使用本地 json 文件填充了下拉列表：

$.getJSON('areaList.json', function(json) {
        for(i =  0; i < json.length; i++){
            $('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
        }
    });

HTML

<select class="selectArea" style='width: 120px; font-family: Arial'></select>

我的目标是能够使用下拉框中的占位符加载页面，然后能够单击第一个选项并填充该框，这样我就可以将该值用于应用程序的其他部分。

如有任何帮助，我们将不胜感激。

Answer 1

您需要在向空下拉列表添加新选项后触发 change 事件。

Answer 2

我无法删除选中的第一个选项，选中的属性甚至没有在 Web 检查器中呈现。我被迫删除了第一个选项，因为我的验证在 select2 上失败了。

我解决问题的方法是：

填充选项后，我在所有其他选项之上添加了一个新选项，并向其中添加了所选属性。紧接着，我将其删除：代码如下：

$(".countries").prepend('<option selected class="placeholdered" value="">Select from the list of countries</option>');
$('.countries').select2().trigger('change');
$('.countries option').removeAttr('selected');

请注意，我在删除所选内容之前触发了 select2 更改。不需要占位符...

无法在 select2 保管箱中 select 第一个选项

Cannot select first option in select2 dropbox

javascript

jquery

json

drop-down-menu

select2