0

我有两个这样的下拉列表：

<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 功能完美运行的第二个下拉列表。问题是当发生验证错误时，第二个下拉菜单有时会保留其默认值，这些状态与所选国家/地区无关。解决方案是在第一个下拉菜单的 onload 中触发该功能，但它不起作用。

4

1 回答 1

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>
于 2012-11-09T02:03:32.633 回答