带有标志的HTML国家列表[关闭]

Question

我正在寻找一种选择和显示国家/地区列表的方法，最好是带有标志的国家/地区。有什么建议吗？

我首先尝试使用此jQuery插件 http://www.graphicpush.com/website-language-dropdown-with-jquery ，但是由于我所拥有的国家/地区列表很大，因此结果表明该性能确实很差（对图像的http请求过多）。另外，当列表大于50个元素时，列表也很庞大。

Answer 1

未来的注意事项：jQuery UI自动完成功能现在支持自定义 默认情况下渲染，请参见 http://api.jqueryui.com/autocomplete/#method-_renderItem 。

这很容易。您需要的东西：

1. jQuery UI自动完成
2. UI自动完成html扩展名
3. A 国家名称/代码列表
4. 一个带有所有标志的CSS精灵

   请记住，Google是您的朋友。很好地混合成分，仔细搅拌一些JavaScript，然后完成-只需7行代码： 通用标签

   这是运行中的代码

Answer 2

只是想建议一种更聪明的做标志精灵的方法。

想法是根据国家iso2代码将标志保存在网格中。

第一个字母->垂直位置
第二个字母->水平位置

示例（适用于16x11px标记+ 4x4px间距）： 通用标签

这样，我可以在客户端使用非常简单的函数来计算标志位置，而无需使用200多个额外的样式定义。

示例jQuery插件： 通用标签

演示用法： 通用标签

http://jsfiddle.net/roberkules/TxAhb/

这是我的标志精灵：

Answer 3

正如评论者所提到的，在这里CSS CSS sprite是正确的解决方案。幸运的是，有很多CSS精灵标志可供免费使用。 这个看起来不错。

我们将必须调整下拉代码以适应该预制的CSS Sprite。我已经为您做到了。 这是一个实时演示。

languageswitcher.js 通用标签

languageswitcher.css 通用标签

我对CSS所做的更改是Q＆amp; D hack；您可能需要花费一些时间来完善它们。由于我们使用的是 flag16.css 。

此外，如果CSS精灵中不存在国家/地区代码，则显示的标记将默认为 非盟的旗帜，因为它是精灵中的第一个图像。在演示中，我的示例列表中的多个国家/地区没有子画面图片。提防。

Answer 4

这是一个包含国家/地区列表和其标志链接的文件（尽管某些链接可能无法使用，但大多数链接可用） Excel文件

Answer 5

您还可以使用来自 http://www.famfamfam.com/lab/icons的标志/ flags / ，只需使用CSS定位相应的标志即可。

----编辑----

如果我需要显示我的国家的国旗，那么我会从CSS进行映射，例如

<span class='np'></span>

.np {
background: url(./flags_preview_large.png) -172px -397px no-repeat;
width: 14px;
height: 20px;
遗传标记代码