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.

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.

• javascript
• html

• There is no onload event on a select element. – epascarello Commented Nov 9, 2012 at 1:07
• What do you mean when a validation error occurred? – Hope4You Commented Nov 9, 2012 at 1:12
• ok let me explain when form loads country us and drop down contains us states . when user select different country second changes and submit if the form contains any validation error the country remains the user selected one may be the select country India but the second drop down remains the states of us. that is the issue. – sudeep cv Commented Nov 9, 2012 at 1:15
• What if you trigger the 'change' event? Without all the code I'm just guessing, but I think that'll do what you need. – beon Commented Nov 9, 2012 at 1:21
• Not related to the problem, but don't put "javascript:" in onXXX attributes. – Barmar Commented Nov 9, 2012 at 1:31

1 Answer 1

How about jQuery? Please see example. http://jsfiddle/hrHWJ/

<script type="text/javascript"src="https://ajax.googleapis./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>