国家/地区的 Select2 下拉菜单，带有标志
Posted
技术标签:
【中文标题】国家/地区的 Select2 下拉菜单，带有标志【英文标题】：Select2 drop-down for countries, with flags 【发布时间】：2013-08-08 14:13:15 【问题描述】：有人有一个易于使用的国家下拉列表示例，带有国家标志，Select2？我将根据this 的建议实施一个，但我宁愿避免重新发明***。
【问题讨论】：
【参考方案1】：我正在解决类似的问题，这是我的解决方法。
(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);
我也为此做了一个gist，下面是演示。
Demo 1 Demo 2 with flags 基于官方DOC 的select2
【讨论】：
Select2; Examples - Templating 会在您在非下拉视图中选择一个国家作为选定选项时显示标志。我已经复制了他们所做的，类似于您的Demo 2 with flags，但是这不会在选择选项时显示标志。请问如何复制？ 很棒的解决方案 - 适用于我的 Chrome 页面操作扩展 @TimMarshall 如果你还没有修复它，我可以看看你尝试过的代码吗？ @GregTrevelick，太好了。我很高兴。完成延期后告诉我。我想看看。 @Starx，感谢您的解决方案，它对我帮助很大。我知道这个答案有点老了，但我想回答@Tim Marshall，因为我遇到了同样的问题，而且解决方案可以帮助其他人。首先，您必须确保添加 flag-icon CSS 库（<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/css/flag-icon.min.css" rel="stylesheet" /> in 2019）。【参考方案2】：
我的做法：
<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>
并使用 css 库（css 和精灵） https://www.flag-sprites.com/
Official DOC
【讨论】：
【参考方案3】：查看以下链接。
http://www.marghoobsuleman.com/countries-dropdown-flags http://vincentlamanna.com/BootstrapFormHelpers/country.html
【讨论】：
第二个链接失效 =[ 第一个链接是一个很好的库，但是它有很多错误并且没有响应 @VivienPipo 是的，它不是响应式的，但它非常有帮助，并且对于响应性，您需要让它们响应，例如更改 .dd 类的宽度【参考方案4】：<head>
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
<script>
$(document).ready(function() $("#e1").select2(); );
</script>
</head>
<body>
<select id="e1">
<option value="1">Albania<img src="Albania.jpg"></option>
...
<option value="2">Germany<img src="Germany.jpg"></option>
</select>
</body>
【讨论】：
谢谢，但这太原始了。我仍然需要将图像（jpgs，没办法！），国家列表等放在一起。我正在寻找一些 javascript 库，我可以在其中简单地传递一系列国家（例如，通过 ISO 代码），然后得到一个完全初始化的Select2 下拉菜单，带有标志。以上是关于国家/地区的 Select2 下拉菜单，带有标志的主要内容，如果未能解决你的问题，请参考以下文章