的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

回答

相关问题