将标志添加到国家/地区选择下拉列表答案

【问题标题】：Add flags to a country select dropdown将标志添加到国家/地区选择下拉列表
【发布时间】：2012-12-02 02:02:01
【问题描述】：

我正在使用我在 google 上找到的预制列表构建一个国家选择器，以及一种在 roberkules (http://stackoverflow.com/questions/5409780/ html-country-list-with-flags)。

我是初学者，尽管我了解每个部分的工作原理，但我不明白如何“让”jQuery 读取 ISO 代码，然后将其应用于每个国家/地区。我还在第一个国家/地区添加了<i></i>，看看它是否至少会放西班牙国旗但什么也没有。

！我知道有一个类似的问题，但它使用手动 css 坐标，我希望它与此 JavaScript 中的方法一起使用：

(function($) {
// size = flag size + spacing
var default_size = {
    w: 20,
    h: 15
};

function calcPos(letter, size) {
    return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
}

$.fn.setFlagPosition = function(iso, size) {
    size || (size = default_size);

    return $(this).css('background-position',
        [calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
};
})(jQuery);

// USAGE:

(function($) {

$(function() {
    // on load:
    $('.country i').setFlagPosition('es');

});

})(jQuery);

http://jsfiddle.net/3TvWs/ 就是我现在的位置。

任何人都可以提供帮助，哪怕只是一个提示？

编辑：对不起，我意识到我解释得很糟糕。（标志）西班牙只是精确定位如何工作的一个例子。我实际上的意思是旗帜在下拉列表中，根本没有那个西班牙气泡。很抱歉造成误会。

【问题讨论】：

标签： jquery

【解决方案1】：

设置一个事件处理程序来监听下拉菜单事件上的更改事件，并在其中调用setFlagPosition。

$('select[name="country"]').on('change', function(){
    $('.country i').setFlagPosition($(this).val())[0].nextSibling.nodeValue = $(':selected', this).text();
});

http://jsfiddle.net/mowglisanu/3TvWs/1/

【讨论】：

哦，效果很好，但实际上我的意思是将标志放在下拉列表中，（标志）西班牙只是在那里显示脚本如何定位标志，我不打算实际保留它。所以只是实际列表中带有标志的下拉菜单，到目前为止非常感谢。
没关系，我更喜欢下拉菜单中的标志，但这种方式也可以正常工作。谢谢。