Ajax function onload

Ajax function onload

本文关键字:onload function Ajax      更新时间:2023-09-26

我使用以下代码:

var selected = {
    country_id: <?php echo (int)$country_id;?>,
    state_id: <?php echo (int)$state_id;?>,
    city_id: <?php echo (int)$city_id;?>
},
countryMap = '<?php echo $countryMap;?>',
stateMap = '<?php echo $stateMap;?>',
cityMap = '<?php echo $cityMap;?>';
$("select.event-shipping-country").off().on("change", function() {
    var $self = $(this);
    if(!$self.val()) {
        $("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
    }
    countryMap = cityMap = stateMap = '';
    $.ajax({
        url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
        data: { id: $self.val() },
        dataType: 'json',
        success: function (result) {
            $("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
            selected.country_id = $self.val();
            if(!result.length)
            {
                $("select.event-shipping-state").change();
                return;
            }
            countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
            var html = '';
            for(var idx in result)
                html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
            $("select.event-shipping-state").append(html);
        },
        type: 'POST'
    });
});
$("select.event-shipping-state").off().on("change", function() {
    var $self = $(this);
    cityMap = '';
    $.ajax({
        url: '<?php echo $this->url([ 'controller' => 'city', 'action' => 'get-cities' ], 'shipping_c_a') ?>',
        data: { state: $self.val(), country: $("select.event-shipping-country").val() },
        dataType: 'json',
        success: function (result) { 
            $("select.event-shipping-city").find("option:gt(0)").remove();
            selected.state_id = $self.val();
            if(!result.length)
            {
                return;
            }
            var html = '';
            for(var idx in result)
                html += '<option ' + (selected.city_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
            $("select.event-shipping-city").append(html);
            stateMap =  $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
        },
        type: 'POST'
    });
    stateMap = $self.val() ? $self.text() : '';
});
$("select.event-shipping-city").off().on("change", function() {
    selected.city_id = $(this).val();
    cityMap = $(this).val() ? $(this).find('option[value="' + $(this).val() + '"]').text() : '';
});

该函数根据所选国家选择州。问题是我只有一个国家的ID 117。但是,即使我只选择了一个默认选项,我也必须再次选择它,并且只会显示状态,但我需要通过选择国家id 117来加载页面加载状态。

谢谢。

$("select.event-shipping-country").off().on("change", function() {

以上行只有在国家变更时才会被调用。

document.ready() or document.onload上也调用相同的函数,on change将在国家变化时保持相同。

这样做的方法是将整个代码保持在单独的函数中,并在document.ready() or document.onload and on change of country上也调用该函数

function onCountryChange() {
    var $self = $(this);
    if(!$self.val()) {
        $("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
    }
    countryMap = cityMap = stateMap = '';
    $.ajax({
        url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
        data: { id: $self.val() },
        dataType: 'json',
        success: function (result) {
            $("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
            selected.country_id = $self.val();
            if(!result.length)
            {
                $("select.event-shipping-state").change();
                return;
            }
            countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
            var html = '';
            for(var idx in result)
                html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
            $("select.event-shipping-state").append(html);
        },
        type: 'POST'
    });
}
$("select.event-shipping-country").off().on("change", onCountryChange );
document.ready(function() {
    onCountryChange();
});

试试这样,只需在函数中传递您的代码并在document.ready()中调用这些函数

        var selected = {
            country_id: <?php echo (int)$country_id;?>,
            state_id: <?php echo (int)$state_id;?>,
            city_id: <?php echo (int)$city_id;?>
        },
        countryMap = '<?php echo $countryMap;?>',
        stateMap = '<?php echo $stateMap;?>',
        cityMap = '<?php echo $cityMap;?>';
        function onCountryChange(){
        var $self = $(this);
            if(!$self.val()) {
                $("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
            }
            countryMap = cityMap = stateMap = '';
            $.ajax({
                url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
                data: { id: $self.val() },
                dataType: 'json',
                success: function (result) {
                    $("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
                    selected.country_id = $self.val();
                    if(!result.length)
                    {
                        $("select.event-shipping-state").change();
                        return;
                    }
                    countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
                    var html = '';
                    for(var idx in result)
                        html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
                    $("select.event-shipping-state").append(html);
                },
                type: 'POST'
            });
        }
        $("select.event-shipping-country").off().on("change", function() {
            onCountryChange();
        });
        function onStateChange(){
        var $self = $(this);
            cityMap = '';
            $.ajax({
                url: '<?php echo $this->url([ 'controller' => 'city', 'action' => 'get-cities' ], 'shipping_c_a') ?>',
                data: { state: $self.val(), country: $("select.event-shipping-country").val() },
                dataType: 'json',
                success: function (result) { 
                    $("select.event-shipping-city").find("option:gt(0)").remove();
                    selected.state_id = $self.val();
                    if(!result.length)
                    {
                        return;
                    }
                    var html = '';
                    for(var idx in result)
                        html += '<option ' + (selected.city_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
                    $("select.event-shipping-city").append(html);
                    stateMap =  $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
                },
                type: 'POST'
            });
            stateMap = $self.val() ? $self.text() : '';
        }
        $("select.event-shipping-state").off().on("change", function() {
            onStateChange();
        });
        function onCityChange(){
            selected.city_id = $(this).val();
            cityMap = $(this).val() ? $(this).find('option[value="' + $(this).val() + '"]').text() : '';
        }
        $("select.event-shipping-city").off().on("change", function() {
        onCityChange();
        });
         $(document).ready(function () {
         onCountryChange();
         onStateChange();
         onCityChange();
         });