2012-11-09 140 views
0

我有兩個下拉這樣的:如何觸發下拉列表中的onload事件

<select onload="javascript:loadState(this.value)" onchange="javascript:loadState(this.value)" id="cntry" name="country"> 
    <option label="United States" value="1">United States</option> 
    <option label="Afghanistan" value="2">Afghanistan</option> 

</select> 




<select id="state" name="state"> 
    <option label="Alabama" value="1">Alabama</option> 
    <option label="Alaska" value="2">Alaska</option> 
    <option label="Arizona" value="3">Arizona</option> 
    <option label="Arkansas" value="4">Arkansas</option> 
    <option label="California" value="5">California</option> 
</select> 



function loadState(countryId) 
{ 

    $j.ajax({ 
     type: "GET", 
     url: baseUrl+'/profile/load-states/country-id/'+countryId, 
     data: "", 
     dataType: "xml", 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $j("#message").html("<p>There is problem with the ajax request.</p>"); 
      return false; 
     }, 
     success: function(xml){ 
      var htmlOptions = ''; 
      $j(xml).find("State").each(function() { 

       var states = $j(this); 

       var stateId = states.attr("Id"); 
       var stateName = states.attr("Name"); 

       htmlOptions += "<option value='"+ stateId +"'>"+stateName+"</option>"; 
      }); 

      if(htmlOptions){ 

       $j("#state").html(htmlOptions); 
      } 
      else 
      { 
       htmlOptions = "<option value='0'>Select State</option>"; 
       $j("#state").html(htmlOptions); 


      } 

     } 
    }); 

} 

這裏的時候,我們選擇一個國家它會自動填入該國的狀態爲第二個下拉的LoadState的功能完美的工作。問題是當發生驗證錯誤時,第二次下拉列表保留其默認值,某些時候狀態與選定國家無關。該解決方案觸發第一個下拉列表中的函數,但它不起作用。快速反應表示讚賞謝謝。

+0

select元素上沒有onload事件。 – epascarello

+0

你是什麼意思'當發生驗證錯誤時'? – Hope4You

+0

好的讓我解釋一下當表單加載我們的國家和下拉菜單包含我們的國家。當用戶選擇不同的國家第二次更改並提交,如果表格包含任何驗證錯誤,該國仍然是用戶選擇的國家可能是選擇國家印度,但第二個下降仍然是我們的國家。這是問題。 –

回答

1

jQuery怎麼樣?請看例子。 http://jsfiddle.net/hrHWJ/

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript"> 

    jQuery(document).ready(function($){ 

     /*The country onchange starts here*/ 
     var orig_html; 
     var orig_value; 
     var state_value; 

     var us_states = {AL: 'Alabama', AK: 'Alaska', AZ: 'Arizona', AR: 'Arkansas', CA: 'California', CO: 'Colorado', CT: 'Connecticut', DE: 'Delaware', DC: 'District of Columbia', FL: 'Florida', GA: 'Georgia', HI: 'Hawaii', ID: 'Idaho', IL: 'Illinois', IN: 'Indiana', IA: 'Iowa', KS: 'Kansas', KY: 'Kentucky', LA: 'Louisiana', ME: 'Maine', MD: 'Maryland', MA: 'Massachusetts', MI: 'Michigan', MN: 'Minnesota', MS: 'Mississippi', MO: 'Missouri', MT: 'Montana', NE: 'Nebraska', NV: 'Nevada', NH: 'New Hampshire', NJ: 'New Jersey', NM: 'New Mexico', NY: 'New York', NC: 'North Carolina', ND: 'North Dakota', OH: 'Ohio', OK: 'Oklahoma', OR: 'Oregon', PA: 'Pennsylvania', RI: 'Rhode Island', SC: 'South Carolina', SD: 'South Dakota', TN: 'Tennessee', TX: 'Texas', UT: 'Utah', VT: 'Vermont', VA: 'Virginia', WA: 'Washington', WV: 'West Virginia', WI: 'Wisconsin', WY: 'Wyoming'}; 
     var $el = $("#location-country"); 
     $el.data('oldval', $el.val()); 
     $el.change(function(){ 
      var $this = $(this); 
      if(this.value=="US" && $this.data('oldval')!="US"){ 
       var str = '<select name="location-state" id="location-state">'; 
       orig_html = $("#location-state-div").html(); 
       orig_value = $("#location-state").val(); 
       for(var st in us_states){ 
        if(st == state_value) 
         str += '<option value="'+st+'" selected="selected">'+us_states[st]+'</option>'; 
        else 
         str += '<option value="'+st+'">'+us_states[st]+'</option>'; 
       } 
       str += "</select>"; 
       $("#location-state-div").html(str); 
       $this.data('oldval', $this.val()); 
      } 
      else if($this.data('oldval')=="US" && $this.val()!="US"){ 
       state_value = $("#location-state").val(); 
       $("#location-state-div").html(orig_html); 
       $("#location-state").val(orig_value); 
       $this.data('oldval', $this.val()); 
      } 
     }); 

    }); 


</script> 




<div id="location-country-div"> 
    <select id="location-country" name="location_country"> 
    <option value=""></option> 
    <option value="US">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    </select> 
</div> 



<div id="location-state-div"> 
    <input id="location-state" type="text" name="location_state" /> 
</div> 
相關問題