Question

here is my situation. I have a select box that is populated from a database SELECT command with PHP. The same select which is a select of countries has a jQuery event bind on it and on change it goes and load the flag of each country.

$("#CountryA").change(function () {
    var countryname = this.options[this.selectedIndex];
    var fileExist = $.ajax({
        url: './../theme/_images/flags/' + $.trim($(countryname).text()) + '.png',
        type: 'HEAD',
        error: function () {
            $("#flag").html('<img src= "./../theme/_images/flags/notFound.png" />');
        },
        success: function () {
            $("#flag").html('<img src= "./../theme/_images/flags/' + $.trim($(countryname).text()) + '.png" />');
        }
    });
})

and this is the PHP

<?php
while ($data = $connection->dbFetchArray($resultCountry)) {
    if ($data["Description"] == @$_GET['country'])
        echo "<option value='" . $data["Description"] . "' selected='selected'>" . $data["Description"] . "</option>";
    else
        echo "<option value='" . $data["Description"] . "'>" . $data["Description"] . "</option>";

}
?>

Also with php I managed to remember the selected value of the user before the sumbit. BUT after the user sumbits the form (I am using PHP_SELF so I remain in the same page) the flag dissapears.

Can I make the function to be executed again after the sumbit button? On pageload or something in order to have the flag of the selected country displayed to the user???

Thanks in advance!

======================EDIT===========================

Ok, thank you very much augustknight and everyone that took the time to respond… 😀

I made some minor changes to your code because these lines

    var country_name = $("#CountryA :selected").val();
    set_country_flag_image(this.options[this.selectedIndex]);

were giving me some weird HTMLOptionElement instead of the selected name. So here is the final code for future reference. 😀 THanks again!!!

$(function () {
    // Initialize the flag to the selected country (could also be done server-side)
    var country_name = $("#CountryA").val();
    set_country_flag_image(country_name);


    // Update the flag image when a country is selected
    $("#CountryA").change(function () {
        alert($("#CountryA").val());
        set_country_flag_image($("#CountryA").val());
    });
});

function set_country_flag_image(country_name) {
    $.ajax({
        url: './../theme/_images/flags/' + country_name + '.png',
        type: 'HEAD',
        error: function () {
            $("#flag").html('<img src= "./../theme/_images/flags/notFound.png" />');
        },
        success: function () {
            $("#flag").html('<img src= "./../theme/_images/flags/' + country_name + '.png" />');
        }
    });
}

Answer 1

I think this is what you are looking for.

$(function () {
    // Initialize the flag to the selected country (could also be done server-side)
    var country_name = $("#CountryA :selected").val();
    set_country_flag_image( country_name );

    // Update the flag image when a country is selected
    $("#CountryA").change(function(){
        set_country_flag_image(this.options[this.selectedIndex]);
    });
});


function set_country_flag_image(country_name)
{
    $.ajax({
        url:'./../theme/_images/flags/'+country_name+'.png',
        type:'HEAD',
        error:
            function(){
                $("#flag").html('<img src= "./../theme/_images/flags/notFound.png" />'); 
            },
        success:
            function(){
               $("#flag").html('<img src= "./../theme/_images/flags/'+country_name+'.png" />'); 
            }
    });
}