Question

I have a dropdown country list using the jquery and stuff at http://jsfiddle.net/josh3736/jf5QK/ however in that demo and mine when you select one from the dropdown, it doesn’t change the flag image, and it only briefly changes the country name? I’ve tried playing with it to no avail.

Any help?

Answer 1

The country changes back because the form is posted and the dropdown is rebuilt when a country is chosen. The click event seems to propagate to something that is posting the form.
This can be prevented by adding a e.preventDefault() to the click function:

// when a language is clicked, make the selection and then hide the list
$(".dropdown dd ul li a").click(function(e) {
    var clickedValue = $(this).parent().attr("class");
    var clickedTitle = $(this).find("em").html();
    $("#target dt").removeClass().addClass(clickedValue);
    $("#target dt em").html(clickedTitle);
    $languageList.hide();
    $dropTrigger.removeAttr("class");
    e.preventDefault();
});

I’ll try to look into it some more to try to find out why the flag isn’t changing.

Edit:
Seems as if someone else posted the solution to the flag issue before me 😛

Anyway, this was the solution that I came up with:

var clickedValue = $('em', this).attr("class");