Question

我使用此代码：

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来加载页面加载状态。

谢谢。

Answer 1

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

Answer 2

尝试这样，只需将函数传递给函数并在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();
         });

Ajax函数onload

2 个答案: