title: AEM 6.1 : Best way to implement Country-State Dropdown
body: <p>What would be the best way to do the following:</p>
  
  <ol>
  <li><p>A drop-down list with COUNTRYies. The list of countries are in json format, retrieved from a web service.</p></li>
  <li><p>Show or pre-fill the STATE dropdown based on Country selection. </p></li>
  </ol>
  
  <p>This looks to be a standard requirement but was not able to find a proper solution. </p>
  
  <p>What we have done as of now if using Sightly, make a call to get the Country list in a json and populate, and based on selection show STATES(for USA) or PROVINCES(for Canada) and doing Show/Hide. But was looking for better alternatives.</p>
  
  <pre><code>&lt;!-- COUNTRY --&gt;
  &lt;select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID"&gt;
  &lt;option value=""&gt;Please Select&lt;/option&gt;
  &lt;div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap&gt;
      &lt;option value="${jHelper.pJSON.countryList[country].countryID @ context='html'}"&gt;
          ${jsonHelper.parsedJSON.countryList[country].countryLongName @ context='html'}
      &lt;/option&gt;
  &lt;/div&gt;
  &lt;/select&gt;
  
  &lt;!-- STATES or PROVINCES --&gt;
  &lt;select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;"&gt;
  &lt;option selected="selected" value=""&gt;Please Select&lt;/option&gt;
  &lt;div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap&gt;
      &lt;option&gt;${jHelper.pJSON.stateListUS[state].stateLongName @ context='html'}&lt;/option&gt;
  &lt;/div&gt;
  &lt;/select&gt;
  
  &lt;!-- OR --&gt;
  
  &lt;select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;"&gt;
  &lt;option selected="selected" value=""&gt;Please Select&lt;/option&gt;
  &lt;div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap&gt;
      &lt;option&gt;${jHelper.pJSON.stateListCA[province].stateLongName @ context='html'}&lt;/option&gt;
  &lt;/div&gt;
  &lt;/select&gt;
  </code></pre>