国家-州-城市联动下拉框显示[object Object]问题求助

Hey there, let's break down why your state dropdown is displaying [object Object] when you select "US" (North America) and get it working properly:

Core Issues #

• Incorrect Array Traversal: Your us_states.json and GA_cities.json are arrays of objects, but you're treating them like key-value objects in $.each. For arrays, $.each passes (index, arrayItem) to the callback—so you were trying to print the entire state object instead of its stateCode and name properties.
• Uninitialized/Unreset Variables: Your HTML-building variables (countryOptions, stateOptions, etc.) started as undefined, which would get appended to your options. Plus, you never reset them when changing selections, leading to duplicate options over time.

Fixed jQuery Code #

$(function(){
    // Initialize all HTML-building variables as empty strings
    let countryOptions = '';
    let stateOptions = '';
    let gaCitiesOps = '';

    $.getJSON('countries.json',function(data){
        $.each(data, function(i, country) {
            countryOptions += '<option value="'+country.code+'">' + country.name + '</option>';
        });
        $('#country').html(countryOptions);
    });

    $("#country").change(function(){
        // Reset state dropdown and variable when country changes
        stateOptions = '';
        $('#state').html('<option selected value="base">Select state</option>');
        $('#city').html('<option selected value="base">Select City</option>'); // Clear city too

        if($(this).val() === "US"){
            $.getJSON('us_states.json',function(data){
                // Correctly iterate over the array of state objects
                $.each(data, function(i, state) {
                    stateOptions += '<option value="'+state.stateCode+'">' + state.name + '</option>';
                });
                // Add default option + new state options
                $('#state').html('<option selected value="base">Select state</option>' + stateOptions);
            });
        }
    });

    $("#state").change(function(){
        // Reset city dropdown and variable when state changes
        gaCitiesOps = '';
        $('#city').html('<option selected value="base">Select City</option>');

        if($(this).val() === "GA"){
            $.getJSON('GA_cities.json',function(data){
                // Correctly iterate over the array of city objects
                $.each(data, function(i, city) {
                    gaCitiesOps += '<option value="'+city.code+'">' + city.name + '</option>';
                });
                // Add default option + new city options
                $('#city').html('<option selected value="base">Select City</option>' + gaCitiesOps);
            });
        }
    });
});

Key Fixes Explained #

• Variable Initialization: Starting with empty strings ('') instead of undefined prevents weird prefixed text in your dropdowns.
• Array Traversal Fix: For us_states.json, we now access state.stateCode and state.name from each array item, instead of trying to use the index as a code and the object as a name.
• Dropdown Reset: Every time you change the country/state, we clear the lower-level dropdowns and reset the HTML variable—no more duplicate options piling up.
• Preserve Default Options: We keep the "Select xxx" option when reloading dropdowns, so users always have a clear starting point.

After making these changes, selecting "US" will load your states correctly, and selecting "GA" will load the Georgia cities without any [object Object] mess.

内容的提问来源于stack exchange，提问作者brohjoe