How to trigger onload event of dropdown list?

Question

I have two dropdown like this:

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


             }

        }
    });

}

Here when we select a country it is automatically populate the states of that country as second drop-down the loadState function working perfectly . the problem is when a validation error occurred the second drop down retain its default values some time the states not related to selected country. The solution is trigger the function in onload of first drop-down but it won't work.

Answer 1

How about jQuery? Please see example. 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>