的Ajax功能的onload

基礎上選定的國家

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的國家。但即使我只選擇了一個默認選項，我也必須再次選擇它，並且只顯示狀態，但我需要通過選擇國家/地區編號117來加載頁面加載狀態。

謝謝。

來源

2015-08-31 user2482734

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

來源

2015-08-31 10:30:47 intekhab

試試這個樣子，只是傳遞一個函數裏面我們的代碼和撥打的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(); 
     });

來源

2015-08-31 10:54:40

的Ajax功能的onload

回答

相關問題