Best way to implement Country-State Dropdown

[Former Community Member]

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'}"> ${jHelper.pJSON.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>

[edubey]

Hi,

One approach I would suggest is you can also fill these drop down via JS call to web service as well, It will be an ajax request. If data you received from web service does changes too frequently you can store these value in browser localstorage.

Call to webservice will be made only 1st time, on subsequent page load, data can retrieved from localstorage. It all depends of frequency of data changes.

But above code seems to definitely call your webservice every time user reloads the page.

Let me know what do you think......

[Former Community Member]

Thanks.

How do we make this call (Fill drop down via JS call to web service.. ajax request) ? Can you help me with a code-example.. 

I think i saw an example here [ https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html ] but was not complete.

And yes, our requirement is to load to Country/State everytime.. client sells Products to Consumers in different regions, and the drop downs chnages based on product availability in that region.

[edubey]

Here are code sample for dynamic drop down:

http://www.coderslexicon.com/populating-multiple-drop-downs-dynamically/

http://www.tamilcodes.com/javascript-dynamic-dependent-drop-down-list-box/

https://css-tricks.com/dynamic-dropdowns/

Remember, Data in these article are static, you need to replace this data with what you receive from webservice

Here are ajax sample:

Fior Jquery: http://www.sitepoint.com/use-jquerys-ajax-function/

Simple : http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

[smacdonald2008 · Accepted solution]

Your web service calls needs to be in the backend within an OSGi bundle. Then return the data to the front end and populate a control - such as a dropdown. 

Here is a community article that shows invokgin a web service from an OSGi bundle and returning the data to a front end - where it is displayed:

https://helpx.adobe.com/experience-manager/using/using-jsonwriter-objects-display-cq.html

[Former Community Member]

Yes i agree.. using the OSGI/java alidation route would be simple. But our requirement was to do this on the form/client-side. I was looking into Adaptive Forms and the "GuideDropdownList" component. Will udpdate the post if i can solve this using adaptive forms.