0

What would be the best way to do the following:

  1. A drop-down list with COUNTRYies. The list of countries are in json format, retrieved from a web service.

  2. Show or pre-fill the STATE dropdown based on Country selection.

This looks to be a standard requirement but was not able to find a proper solution.

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.

<!-- COUNTRY -->
<select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID">
<option value="">Please Select</option>
<div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap>
    <option value="${jHelper.pJSON.countryList[country].countryID @ context='html'}">
        ${jsonHelper.parsedJSON.countryList[country].countryLongName @ context='html'}
    </option>
</div>
</select>

<!-- STATES or PROVINCES -->
<select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap>
    <option>${jHelper.pJSON.stateListUS[state].stateLongName @ context='html'}</option>
</div>
</select>

<!-- OR -->

<select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap>
    <option>${jHelper.pJSON.stateListCA[province].stateLongName @ context='html'}</option>
</div>
</select>
Suren Konathala
  • 3,497
  • 5
  • 43
  • 73

1 Answers1

0

My solution will be:

  1. Manage Country/City hierarchy in Taxonomy
  2. Create a Json from taxonomy for Country-City
  3. Use Javascript to read Json and populate correct city for country

Above solution can be enhanced by pre-populating country/city based on user geolocation.

Mohit Bansal
  • 384
  • 3
  • 12
  • I tried this route, using this example https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html but this works only with the Dropdown list component (called as GuideDropdownList located in "/libs/fd/af/components/guidedropdownlist" ) in an AdaptiveForm not with the OOTB Dropdown list component. – Suren Konathala Sep 24 '15 at 14:16
  • you can use dynamic dropdown using selection xtyle. What you need to do is: – Mohit Bansal Sep 25 '15 at 00:42
  • You can achieve this using OOB selection xtype. You can achieve this by exposing a servlet which generate taxonomy in following format: [ { "value": 10, "text": "A" }, { "value": 20, "text": "B" } ] After that use options property of selection xtype and give path of your servlet. – Mohit Bansal Sep 25 '15 at 00:44
  • Can you send me any examples of an xtype using servlet-path? – Suren Konathala Oct 23 '15 at 21:32