title: Jquery Country/State Json and more
body: <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>