while developing a component I am stuck at making dynamic dropdown based on country
for example :
I have one "granite/ui/components/coral/foundation/form/select" from where we can select countries
in the second dropdown I want the states to be showed according to the selected country on first dropdown
e.g. if US is selected in first dropdown , I want the second dropdown to have only US states
here is the attached screenshot of the design of component.
please guide me how may I proceed to get the approach right
Solved! Go to Solution.
Views
Replies
Total Likes
I recommend you check this tutorial by True Tech troubleshooting https://www.youtube.com/watch?v=8G7ORv0Sijw
I have used a different script that I adapted from one found online,... can't find out where... to populate the State or Provinces for the US Australia, Canada, Brazil, Japan, or leave it open if it's any other country.
In a script object:
form1.#variables[0].StateProvinceDropDownScript - (JavaScript, client)
// This script object controls the interaction between the Country field and State/Province Drop-down lists.
// The array contains the Countries for which a list of State/Province is enforced (AU/BR/CA/JP/US) and the corresponding list of State/Province.
var myStateProvince = new Array(new Array(5), new Array(8), new Array(27), new Array(13), new Array(47), new Array(51)); // Create a two-dimensional array.
// For each country, add a 'new Array(number of Provinces +1)'.
// Define the Countries and the corresponding States/Provinces.
// The array syntax is arrayName[index][index].
// The first index number represents the country,
// the second index number is the actual data value (State Province).
myStateProvince[0][0] = " ";
myStateProvince[0][1] = " ";
myStateProvince[1][0] = "Australia";
myStateProvince[1][1] = "Australian Capital Territory";
myStateProvince[1][2] = "New South Wales";
myStateProvince[1][3] = "Northern Territory";
myStateProvince[1][4] = "Queensland";
myStateProvince[1][5] = "South Australia";
myStateProvince[1][6] = "Tasmania";
myStateProvince[1][7] = "Victoria ";
myStateProvince[1][8] = "Western Australia";
myStateProvince[2][0] = "Brazil";
myStateProvince[2][1] = "Acre";
myStateProvince[2][2] = "Alagoas";
myStateProvince[2][3] = "Amapá";
myStateProvince[2][4] = "Amazonas";
myStateProvince[2][5] = "Bahía";
myStateProvince[2][6] = "Ceará";
myStateProvince[2][7] = "Distrito Federal";
myStateProvince[2][8] = "Espirito Santo";
myStateProvince[2][9] = "Goiás";
myStateProvince[2][10] = "Maranhão";
myStateProvince[2][11] = "Mato Grosso";
myStateProvince[2][12] = "Mato Grosso do Sul";
myStateProvince[2][13] = "Minas Geraís";
myStateProvince[2][14] = "Pará";
myStateProvince[2][15] = "Paraíba";
myStateProvince[2][16] = "Paraná";
myStateProvince[2][17] = "Pernambuco";
myStateProvince[2][18] = "Piauí";
myStateProvince[2][19] = "Rio de Janeiro";
myStateProvince[2][20] = "Rio Grande do Norte";
myStateProvince[2][21] = "Rio Grande do Sul";
myStateProvince[2][22] = "Rondônia";
myStateProvince[2][23] = "Roraima";
myStateProvince[2][24] = "Santa Catarina";
myStateProvince[2][25] = "São Paulo";
myStateProvince[2][26] = "Sergipe";
myStateProvince[2][27] = "Tocantins";
myStateProvince[3][0] = "Canada";
myStateProvince[3][1] = "Alberta";
myStateProvince[3][2] = "British Columbia";
myStateProvince[3][3] = "Manitoba";
myStateProvince[3][4] = "New Brunswick";
myStateProvince[3][5] = "Newfoundland and Labrador";
myStateProvince[3][6] = "Northwest Territories";
myStateProvince[3][7] = "Nova Scotia";
myStateProvince[3][8] = "Nunavut";
myStateProvince[3][9] = "Ontario";
myStateProvince[3][10] = "Prince Edward Island";
myStateProvince[3][11] = "Québec";
myStateProvince[3][12] = "Saskatchewan";
myStateProvince[3][13] = "Yukon";
myStateProvince[4][0] = "Japan";
myStateProvince[4][1] = " Aichi";
myStateProvince[4][2] = " Akita";
myStateProvince[4][3] = " Aomori";
myStateProvince[4][4] = " Chiba";
myStateProvince[4][5] = " Ehime";
myStateProvince[4][6] = " Fukui";
myStateProvince[4][7] = " Fukuoka";
myStateProvince[4][8] = " Fukushima";
myStateProvince[4][9] = " Gifu";
myStateProvince[4][10] = " Gunma";
myStateProvince[4][11] = " Hiroshima";
myStateProvince[4][12] = " Hokkaido";
myStateProvince[4][13] = " Hyōgo";
myStateProvince[4][14] = " Ibaraki";
myStateProvince[4][15] = " Ishikawa";
myStateProvince[4][16] = " Iwate";
myStateProvince[4][17] = " Kagawa";
myStateProvince[4][18] = " Kagoshima";
myStateProvince[4][19] = " Kanagawa";
myStateProvince[4][20] = " Kōchi";
myStateProvince[4][21] = " Kumamoto";
myStateProvince[4][22] = " Kyoto";
myStateProvince[4][23] = " Mie";
myStateProvince[4][24] = " Miyagi";
myStateProvince[4][25] = " Miyazaki";
myStateProvince[4][26] = " Nagano";
myStateProvince[4][27] = " Nagasaki";
myStateProvince[4][28] = " Nara";
myStateProvince[4][29] = " Niigata";
myStateProvince[4][30] = " Ōita";
myStateProvince[4][31] = " Okayama";
myStateProvince[4][32] = " Okinawa";
myStateProvince[4][33] = " Osaka";
myStateProvince[4][34] = " Saga";
myStateProvince[4][35] = " Saitama";
myStateProvince[4][36] = " Shiga";
myStateProvince[4][37] = " Shimane";
myStateProvince[4][38] = " Shizuoka";
myStateProvince[4][39] = " Tochigi";
myStateProvince[4][40] = " Tokushima";
myStateProvince[4][41] = " Tokyo";
myStateProvince[4][42] = " Tottori";
myStateProvince[4][43] = " Toyama";
myStateProvince[4][44] = " Wakayama";
myStateProvince[4][45] = " Yamagata";
myStateProvince[4][46] = " Yamaguchi";
myStateProvince[4][47] = " Yamanashi";
myStateProvince[5][0] = "United States of America";
myStateProvince[5][1] = "Alabama";
myStateProvince[5][2] = "Alaska";
myStateProvince[5][3] = "Arizona";
myStateProvince[5][4] = "Arkansas";
myStateProvince[5][5] = "California";
myStateProvince[5][6] = "Colorado";
myStateProvince[5][7] = "Connecticut";
myStateProvince[5][8] = "Delaware";
myStateProvince[5][9] = "District of Columbia";
myStateProvince[5][10] = "Florida";
myStateProvince[5][11] = "Georgia";
myStateProvince[5][12] = "Hawaii";
myStateProvince[5][13] = "Idaho";
myStateProvince[5][14] = "Illinois";
myStateProvince[5][15] = "Indiana";
myStateProvince[5][16] = "Iowa";
myStateProvince[5][17] = "Kansas";
myStateProvince[5][18] = "Kentucky";
myStateProvince[5][19] = "Louisiana";
myStateProvince[5][20] = "Maine";
myStateProvince[5][21] = "Maryland";
myStateProvince[5][22] = "Massachusetts";
myStateProvince[5][23] = "Michigan";
myStateProvince[5][24] = "Minnesota";
myStateProvince[5][25] = "Mississippi";
myStateProvince[5][26] = "Missouri";
myStateProvince[5][27] = "Montana";
myStateProvince[5][28] = "Nebraska";
myStateProvince[5][29] = "Nevada";
myStateProvince[5][30] = "New Hampshire";
myStateProvince[5][31] = "New Jersey";
myStateProvince[5][32] = "New Mexico";
myStateProvince[5][33] = "New York";
myStateProvince[5][34] = "North Carolina";
myStateProvince[5][35] = "North Dakota";
myStateProvince[5][36] = "Ohio";
myStateProvince[5][37] = "Oklahoma";
myStateProvince[5][38] = "Oregon";
myStateProvince[5][39] = "Pennsylvania";
myStateProvince[5][40] = "Rhode Island";
myStateProvince[5][41] = "South Carolina";
myStateProvince[5][42] = "South Dakota";
myStateProvince[5][43] = "Tennessee";
myStateProvince[5][44] = "Texas";
myStateProvince[5][45] = "Utah";
myStateProvince[5][46] = "Vermont";
myStateProvince[5][47] = "Virginia";
myStateProvince[5][48] = "Washington";
myStateProvince[5][49] = "West Virginia";
myStateProvince[5][50] = "Wisconsin";
myStateProvince[5][51] = "Wyoming";
// This function will populate the State/Provinces Drop-down List for the change event.
// This function is called by the change event of the Country dropdown list.
// The first parameter is simply a pointer to the xfa object model.
function changeStateProvince(CountryWithStateString, StateProvinceField)
{
StateProvinceField.access = "open"; // enables to specify/select a state or province only after a Country was selected.
StateProvinceField.clearItems(); // Clear the items of the Drop-down list.
for (var i=0; i < myStateProvince.length; i++) // Look through all the version until we find the one that matches the country selected.
if(myStateProvince[i][0] == CountryWithStateString) // Check to see if they match. Note: we have to use the event.newText in this case because
{ // the change hasn't been committed yet.
for (var j=1; j < myStateProvince[i].length; j++){ // When they match, add the State/Province to the Drop-down List.
StateProvinceField.addItem(myStateProvince[i][j]); }
}
if(CountryWithStateString==0){
StateProvinceField.resolveNode("ui.#choiceList").textEntry = "1"; // this enables typing a custom entry
} else {
StateProvinceField.resolveNode("ui.#choiceList").textEntry = "0"; // this prevents typing a custom entry.
}
}
And then in the first dropdown list object - on change event
// Update the Country/Province dropdown list field when a different Country is selected.
var sCountry = xfa.event.newText;
if (sCountry!= "Australia" & sCountry!= "Brazil" & sCountry!= "Canada" & sCountry!= "Japan" & sCountry!= "United States of America"){
sCountry = "";
}
StateProvinceDropDownScript.changeStateProvince (sCountry, AuditeeState);
AuditeeState.rawValue = "";
Let me find a sample for you
thank you a thorogh sample would be a great help
You may refer to the following sample for the same:
i uploaded a demo of my sample
if this is what you are looking for, I can send you the package
I recommend you check this tutorial by True Tech troubleshooting https://www.youtube.com/watch?v=8G7ORv0Sijw
I have used a different script that I adapted from one found online,... can't find out where... to populate the State or Provinces for the US Australia, Canada, Brazil, Japan, or leave it open if it's any other country.
In a script object:
form1.#variables[0].StateProvinceDropDownScript - (JavaScript, client)
// This script object controls the interaction between the Country field and State/Province Drop-down lists.
// The array contains the Countries for which a list of State/Province is enforced (AU/BR/CA/JP/US) and the corresponding list of State/Province.
var myStateProvince = new Array(new Array(5), new Array(8), new Array(27), new Array(13), new Array(47), new Array(51)); // Create a two-dimensional array.
// For each country, add a 'new Array(number of Provinces +1)'.
// Define the Countries and the corresponding States/Provinces.
// The array syntax is arrayName[index][index].
// The first index number represents the country,
// the second index number is the actual data value (State Province).
myStateProvince[0][0] = " ";
myStateProvince[0][1] = " ";
myStateProvince[1][0] = "Australia";
myStateProvince[1][1] = "Australian Capital Territory";
myStateProvince[1][2] = "New South Wales";
myStateProvince[1][3] = "Northern Territory";
myStateProvince[1][4] = "Queensland";
myStateProvince[1][5] = "South Australia";
myStateProvince[1][6] = "Tasmania";
myStateProvince[1][7] = "Victoria ";
myStateProvince[1][8] = "Western Australia";
myStateProvince[2][0] = "Brazil";
myStateProvince[2][1] = "Acre";
myStateProvince[2][2] = "Alagoas";
myStateProvince[2][3] = "Amapá";
myStateProvince[2][4] = "Amazonas";
myStateProvince[2][5] = "Bahía";
myStateProvince[2][6] = "Ceará";
myStateProvince[2][7] = "Distrito Federal";
myStateProvince[2][8] = "Espirito Santo";
myStateProvince[2][9] = "Goiás";
myStateProvince[2][10] = "Maranhão";
myStateProvince[2][11] = "Mato Grosso";
myStateProvince[2][12] = "Mato Grosso do Sul";
myStateProvince[2][13] = "Minas Geraís";
myStateProvince[2][14] = "Pará";
myStateProvince[2][15] = "Paraíba";
myStateProvince[2][16] = "Paraná";
myStateProvince[2][17] = "Pernambuco";
myStateProvince[2][18] = "Piauí";
myStateProvince[2][19] = "Rio de Janeiro";
myStateProvince[2][20] = "Rio Grande do Norte";
myStateProvince[2][21] = "Rio Grande do Sul";
myStateProvince[2][22] = "Rondônia";
myStateProvince[2][23] = "Roraima";
myStateProvince[2][24] = "Santa Catarina";
myStateProvince[2][25] = "São Paulo";
myStateProvince[2][26] = "Sergipe";
myStateProvince[2][27] = "Tocantins";
myStateProvince[3][0] = "Canada";
myStateProvince[3][1] = "Alberta";
myStateProvince[3][2] = "British Columbia";
myStateProvince[3][3] = "Manitoba";
myStateProvince[3][4] = "New Brunswick";
myStateProvince[3][5] = "Newfoundland and Labrador";
myStateProvince[3][6] = "Northwest Territories";
myStateProvince[3][7] = "Nova Scotia";
myStateProvince[3][8] = "Nunavut";
myStateProvince[3][9] = "Ontario";
myStateProvince[3][10] = "Prince Edward Island";
myStateProvince[3][11] = "Québec";
myStateProvince[3][12] = "Saskatchewan";
myStateProvince[3][13] = "Yukon";
myStateProvince[4][0] = "Japan";
myStateProvince[4][1] = " Aichi";
myStateProvince[4][2] = " Akita";
myStateProvince[4][3] = " Aomori";
myStateProvince[4][4] = " Chiba";
myStateProvince[4][5] = " Ehime";
myStateProvince[4][6] = " Fukui";
myStateProvince[4][7] = " Fukuoka";
myStateProvince[4][8] = " Fukushima";
myStateProvince[4][9] = " Gifu";
myStateProvince[4][10] = " Gunma";
myStateProvince[4][11] = " Hiroshima";
myStateProvince[4][12] = " Hokkaido";
myStateProvince[4][13] = " Hyōgo";
myStateProvince[4][14] = " Ibaraki";
myStateProvince[4][15] = " Ishikawa";
myStateProvince[4][16] = " Iwate";
myStateProvince[4][17] = " Kagawa";
myStateProvince[4][18] = " Kagoshima";
myStateProvince[4][19] = " Kanagawa";
myStateProvince[4][20] = " Kōchi";
myStateProvince[4][21] = " Kumamoto";
myStateProvince[4][22] = " Kyoto";
myStateProvince[4][23] = " Mie";
myStateProvince[4][24] = " Miyagi";
myStateProvince[4][25] = " Miyazaki";
myStateProvince[4][26] = " Nagano";
myStateProvince[4][27] = " Nagasaki";
myStateProvince[4][28] = " Nara";
myStateProvince[4][29] = " Niigata";
myStateProvince[4][30] = " Ōita";
myStateProvince[4][31] = " Okayama";
myStateProvince[4][32] = " Okinawa";
myStateProvince[4][33] = " Osaka";
myStateProvince[4][34] = " Saga";
myStateProvince[4][35] = " Saitama";
myStateProvince[4][36] = " Shiga";
myStateProvince[4][37] = " Shimane";
myStateProvince[4][38] = " Shizuoka";
myStateProvince[4][39] = " Tochigi";
myStateProvince[4][40] = " Tokushima";
myStateProvince[4][41] = " Tokyo";
myStateProvince[4][42] = " Tottori";
myStateProvince[4][43] = " Toyama";
myStateProvince[4][44] = " Wakayama";
myStateProvince[4][45] = " Yamagata";
myStateProvince[4][46] = " Yamaguchi";
myStateProvince[4][47] = " Yamanashi";
myStateProvince[5][0] = "United States of America";
myStateProvince[5][1] = "Alabama";
myStateProvince[5][2] = "Alaska";
myStateProvince[5][3] = "Arizona";
myStateProvince[5][4] = "Arkansas";
myStateProvince[5][5] = "California";
myStateProvince[5][6] = "Colorado";
myStateProvince[5][7] = "Connecticut";
myStateProvince[5][8] = "Delaware";
myStateProvince[5][9] = "District of Columbia";
myStateProvince[5][10] = "Florida";
myStateProvince[5][11] = "Georgia";
myStateProvince[5][12] = "Hawaii";
myStateProvince[5][13] = "Idaho";
myStateProvince[5][14] = "Illinois";
myStateProvince[5][15] = "Indiana";
myStateProvince[5][16] = "Iowa";
myStateProvince[5][17] = "Kansas";
myStateProvince[5][18] = "Kentucky";
myStateProvince[5][19] = "Louisiana";
myStateProvince[5][20] = "Maine";
myStateProvince[5][21] = "Maryland";
myStateProvince[5][22] = "Massachusetts";
myStateProvince[5][23] = "Michigan";
myStateProvince[5][24] = "Minnesota";
myStateProvince[5][25] = "Mississippi";
myStateProvince[5][26] = "Missouri";
myStateProvince[5][27] = "Montana";
myStateProvince[5][28] = "Nebraska";
myStateProvince[5][29] = "Nevada";
myStateProvince[5][30] = "New Hampshire";
myStateProvince[5][31] = "New Jersey";
myStateProvince[5][32] = "New Mexico";
myStateProvince[5][33] = "New York";
myStateProvince[5][34] = "North Carolina";
myStateProvince[5][35] = "North Dakota";
myStateProvince[5][36] = "Ohio";
myStateProvince[5][37] = "Oklahoma";
myStateProvince[5][38] = "Oregon";
myStateProvince[5][39] = "Pennsylvania";
myStateProvince[5][40] = "Rhode Island";
myStateProvince[5][41] = "South Carolina";
myStateProvince[5][42] = "South Dakota";
myStateProvince[5][43] = "Tennessee";
myStateProvince[5][44] = "Texas";
myStateProvince[5][45] = "Utah";
myStateProvince[5][46] = "Vermont";
myStateProvince[5][47] = "Virginia";
myStateProvince[5][48] = "Washington";
myStateProvince[5][49] = "West Virginia";
myStateProvince[5][50] = "Wisconsin";
myStateProvince[5][51] = "Wyoming";
// This function will populate the State/Provinces Drop-down List for the change event.
// This function is called by the change event of the Country dropdown list.
// The first parameter is simply a pointer to the xfa object model.
function changeStateProvince(CountryWithStateString, StateProvinceField)
{
StateProvinceField.access = "open"; // enables to specify/select a state or province only after a Country was selected.
StateProvinceField.clearItems(); // Clear the items of the Drop-down list.
for (var i=0; i < myStateProvince.length; i++) // Look through all the version until we find the one that matches the country selected.
if(myStateProvince[i][0] == CountryWithStateString) // Check to see if they match. Note: we have to use the event.newText in this case because
{ // the change hasn't been committed yet.
for (var j=1; j < myStateProvince[i].length; j++){ // When they match, add the State/Province to the Drop-down List.
StateProvinceField.addItem(myStateProvince[i][j]); }
}
if(CountryWithStateString==0){
StateProvinceField.resolveNode("ui.#choiceList").textEntry = "1"; // this enables typing a custom entry
} else {
StateProvinceField.resolveNode("ui.#choiceList").textEntry = "0"; // this prevents typing a custom entry.
}
}
And then in the first dropdown list object - on change event
// Update the Country/Province dropdown list field when a different Country is selected.
var sCountry = xfa.event.newText;
if (sCountry!= "Australia" & sCountry!= "Brazil" & sCountry!= "Canada" & sCountry!= "Japan" & sCountry!= "United States of America"){
sCountry = "";
}
StateProvinceDropDownScript.changeStateProvince (sCountry, AuditeeState);
AuditeeState.rawValue = "";
I have form data model that fetches countries/ states from external web site
i will send you that one soon
Here are the assets related to this solution
Giving you Form Data Model's which fetch Country/Sate/cities info from api.geonames.org
Adaptive Form which populates the drop down lists
The Country drop down list is populated when the form is rendered
The state/province list is populated based on the selection of the country
Please create an account with https://www.geonames.org/login and use that username in making the FDM calls
Downloaded these two packages
Modify the Rule associated with the drop down lists to provide your username with the api.geonames account
Preview the form