What I am trying to accomplish is the following:

I have a Country box.

<select class="country singleListBox" name="Country">
    <option value="UNITED STATES">UNITED STATES</option>
    <% Call GetCountry %>
</select>

All GetCountry does is populate it with the countries the client has enabled.

I have a state box.

<select class="autoship singleListBox" name="State">
    <option value="active">Utah</option>
</select>

I have a page that builds out JSON that will either contain the list of states for the selected country, or return with an empty value.

Here is what it looks like not empty:

{
    "regions": [
        {
            "region": "AK"
        },
        {
            "region": "AL"
        },
        {
            "region": "AR"
        },
        {
            "region": "AS"
        },
        {
            "region": "AZ"
        },
        {
            "region": "CA"
        },
        {
            "region": "CO"
        },
        {
            "region": "CT"
        },
        {
            "region": "DE"
        },
        {
            "region": "DC"
        },
        {
            "region": "FM"
        },
        {
            "region": "FL"
        },
        {
            "region": "GA"
        },
        {
            "region": "GU"
        },
        {
            "region": "HI"
        },
        {
            "region": "ID"
        },
        {
            "region": "IL"
        },
        {
            "region": "IN"
        },
        {
            "region": "IA"
        },
        {
            "region": "KS"
        },
        {
            "region": "KY"
        },
        {
            "region": "LA"
        },
        {
            "region": "ME"
        },
        {
            "region": "MH"
        },
        {
            "region": "MD"
        },
        {
            "region": "MA"
        },
        {
            "region": "MI"
        },
        {
            "region": "MN"
        },
        {
            "region": "MS"
        },
        {
            "region": "MO"
        },
        {
            "region": "MT"
        },
        {
            "region": "NE"
        },
        {
            "region": "NV"
        },
        {
            "region": "NH"
        },
        {
            "region": "NJ"
        },
        {
            "region": "NM"
        },
        {
            "region": "NY"
        },
        {
            "region": "NC"
        },
        {
            "region": "ND"
        },
        {
            "region": "MP"
        },
        {
            "region": "OH"
        },
        {
            "region": "OK"
        },
        {
            "region": "OR"
        },
        {
            "region": "PW"
        },
        {
            "region": "PA"
        },
        {
            "region": "PR"
        },
        {
            "region": "RI"
        },
        {
            "region": "SC"
        },
        {
            "region": "SD"
        },
        {
            "region": "TN"
        },
        {
            "region": "TX"
        },
        {
            "region": "UT"
        },
        {
            "region": "VT"
        },
        {
            "region": "VI"
        },
        {
            "region": "VA"
        },
        {
            "region": "WA"
        },
        {
            "region": "WV"
        },
        {
            "region": "WI"
        },
        {
            "region": "WY"
        },
        {
            "region": "AA"
        },
        {
            "region": "AE"
        },
        {
            "region": "AP"
        }
    ]
}

Here is what it looks like empty:

{
    "regions": [
        {
            "region": "empty"
        }
    ]
}

What I am trying to do, is when they change the value of the Country it posts to my json page, and spits back the regions found, or leaves region with a string value of empty.

The trick for me is if it returns back a list of regions I need this to be built into the above select -> option section. But if it returns empty, I then need an input box here of type text to take the place of the select -> option.

What is the best way/best practice to accomplish this? I can handle the posting of the JSON when they change the country, the part I think I will have trouble with is switching out the select for the input when the region is empty.

I am trying to parse this into a jquery object with not much success.

$('select[name=Country]').change(function () {
                console.log(this.value);
                $.getJSON('message_center_getRegions.asp', { country: this.value }, function (json) {
                var options = '';
                var obj = $.parseJSON(json);
                console.log('count' + obj.regions.count);
                console.log(json); 
            })

I console.log(json) and it shows an object with 62 different regions. When I select a country that I don't have regions for in the database it correctly shows it as being empty. I can't seem to get obj to not be null console.log('count' + obj.regions.count); says obj is null.

• jquery

Ideally, if there are no regions, the response should not return

"regions" : [ { "region" : "empty" } ]

It should just return an empty list like this

"regions" : []

Now, when you parse the JSON into a Javascript object, regions.count will be 0.

So,

// parse response into JS object

if (regions.count > 0)
{
    //create select element here
}
else
{
    //input element here
}