Javascript 为国家/地区选择2下拉列表，并带有标志

是否有人有一个易于使用的国家/地区下拉列表示例，带有国家/地区标志，用于

Select2

？我将根据建议实施一个，但我更愿意避免重新发明轮子。

查看以下链接

$（document）.ready（function（）{$（“#e1”）.select2（）；}）；
阿尔巴尼亚
...
德国

我的做法：

<div class="form-group">
    <label class="control-label">Destination</label>
    <input type="text" name="cdCountry" class="form-control" required />
</div>

<script>
    $("[name='cdCountry']").select2({
        placeholder: "Select a country",
        formatResult: function (country) {
            return $(
              "<span><i class=\"flag flag-" + country.id.toLowerCase() + "\"></i> " + country.text + "</span>"
            );;
        },
        data: yourDataSource
    });
</script>

目的地
$（“[name='cdCountry']”）。选择2({
占位符：“选择一个国家”，
formatResult：功能（国家/地区）{
返回$(
“”+country.text+“”
);;
},
数据：yourDataSource
});

以及使用css库（css和精灵）

---

我正在研究一个类似的问题，下面是我如何解决它的

(function($) {
    $(function() {
        var isoCountries = [
            { id: 'AF', text: 'Afghanistan'},
            ...
        ];
        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>

        $("[name='country']").select2({
            placeholder: "Select a country",
            data: isoCountries
        });
    });
})(jQuery);

（函数（$）{
$（函数（）{
var等国家=[
{id:'AF'，text:'Afghanistan'}，
...
];
//假设您有一个名为country的select元素
//例如。
$（“[name='country']”）。选择2({
占位符：“选择一个国家”，
数据：等国家
});
});
})（jQuery）；

我也做了一个关于它的演示，下面是演示

• 根据

  的官方信息选择2

---

谢谢，但这太生了。我仍然需要将图像（jpgs，不可能！）、国家列表等放在一起。我正在寻找一些javascript库，在那里我可以简单地传递一个国家数组（例如，通过ISO代码），并获得一个完全初始化的

Select2

下拉列表，带有标志。第二个链接已失效=[第一个链接是一个很好的库，但它有很多bug，而且不是responsive@VivienPipo是的，它不是响应性的，但它非常有帮助，对于响应性，您需要让它们响应，如更改宽度。dd类当您在非下拉视图中选择一个国家作为所选选项时，将显示国旗。我已复制了它们的内容完成，与您的类似，但是在选择一个选项时，这不会显示标志。我如何复制它？非常棒的解决方案-适用于我的Chrome页面操作extension@TimMarshall如果您还没有修复它，我可以看看您尝试的代码吗？@gregtrevelick，太好了。我很高兴。一旦您完成扩展，请告诉我。我我想看看。@Starx，谢谢你的这个解决方案，它帮助了我很多。我知道这个答案有点旧，但我想回答@Tim Marshall，因为我面临同样的问题，这个解决方案可以帮助其他人。首先，你必须确保添加标志图标CSS库（

2019年）。

(function($) {
    $(function() {
        var isoCountries = [
            { id: 'AF', text: 'Afghanistan'},
            ...
        ];
        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>

        $("[name='country']").select2({
            placeholder: "Select a country",
            data: isoCountries
        });
    });
})(jQuery);