Question

这是我的情况。我有一个选择框，使用PHP从数据库SELECT命令填充。同一个选择的国家/地区选择了一个jQuery事件绑定，并在更改时加载每个国家/地区的标志。

$("#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" />');
        }
    });
})

这是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>";

}
?>

同样使用php我设法记住sumbit之前用户的选定值。但是在用户对表单进行求和后（我使用的是PHP_SELF，所以我保持在同一页面中），标志消失了。

我可以在sumbit按钮后再次执行该功能吗？在页面加载或某事上，以便将所选国家的标志显示给用户???

提前致谢！

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

好的，非常感谢八月骑士和每个花时间回应的人......：D

我对您的代码进行了一些细微更改，因为这些行

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

给了我一些奇怪的HTMLOptionElement而不是选中的名字。所以这是未来参考的最终代码。：D再次谢谢!!!

$(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

退房：

尝试类似：

$(function(){
    $("#CountryA").on("change", function(e) {
        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" />'); 
            }
        });
        console.log(fileExist);
    });
})

Answer 2

要在加载页面后运行函数，您只需执行以下操作：

$(document).ready(function()
{
    //Do something here, like fetching the flag
});

Answer 3

我认为这就是你要找的东西。

$(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" />'); 
            }
    });
}

在更改和页面加载时执行jQuery函数？

3 个答案: