Ajax函数加载

I use this code:

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() : '';
});

This function select states based on selected country. Problem is that I have only one country with ID 117. But even if I have only one default option selected I must select it again to and only than will show states, but I need that states loads on page loading by selecting country id 117.

Thank you.

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

Above line will be called only on change of country.

Call the same function on document.ready() or document.onload also for first time loading and on change will remain same for change on country.

The way to do this is keep the whole code inside separate function and call that function on document.ready() or document.onload and on change of country also

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();
});

Try Like This, Just pass ur code inside a function and call those function at 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();
         });