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 dropbox

2 个答案: