Question

i am building a country selector using a pre-made list I found on google, and a smart method of pinpointing a flag on a png sprite posted on stackoverflow by roberkules (http://stackoverflow.com/questions/5409780/html-country-list-with-flags).

I’m a beginner, and as much as I understand how each part works, I don’t understand how I can “make” the jQuery read the ISO codes and then apply it to each country. I also added <i></i> to the first country to see if it would at least put the Spanish flag but nothing.

! I am aware there is a similar question, but that one uses manual css coordinates, and i wanted it to work with the method in this 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/ Is where I am now.

Could anyone help, even just a hint?

Edit: Sorry, i realize that i explained this badly. The (flag)Spain is just an example of how the pinpointing works. I actually meant the flags to be inside the dropdown, and not have that spain bubble at all. Sorry for the misunderstanding.

Answer 1

Set an event handler to listen for the change event on the dropdown menu event and call setFlagPosition in it.

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

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