Jquery Country/State Json and more
<p>What I am trying to accomplish is the following:</p>

<p>I have a Country box.</p>

<pre><code>&lt;select class="country singleListBox" name="Country"&gt;
    &lt;option value="UNITED STATES"&gt;UNITED STATES&lt;/option&gt;
    &lt;% Call GetCountry %&gt;
&lt;/select&gt;
</code></pre>

<p>All GetCountry does is populate it with the countries the client has enabled.</p>

<p>I have a state box.</p>

<pre><code>&lt;select class="autoship singleListBox" name="State"&gt;
    &lt;option value="active"&gt;Utah&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>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.</p>

<p>Here is what it looks like not empty:</p>

<pre><code>{
    "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"
        }
    ]
}
</code></pre>

<p>Here is what it looks like empty:</p>

<pre><code>{
    "regions": [
        {
            "region": "empty"
        }
    ]
}
</code></pre>

<p>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.</p>

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

<p>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.</p>

<p>I am trying to parse this into a jquery object with not much success.</p>

<pre><code>$('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); 
            })
</code></pre>

<p>I <code>console.log(json)</code> 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 <code>console.log('count' + obj.regions.count);</code> says <code>obj is null</code>.</p>
