1

使用 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>

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

任何帮助将不胜感激。

4

2 回答 2

6

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

于 2016-01-30T14:40:59.710 回答
0

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

我为解决这个问题所做的是：

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

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

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

于 2018-03-28T07:57:28.390 回答