Hello @Burhan Shah
Since there are multiple cities it always good to add an option through script.
- Write an onchange client script with field set to country.
OnChange catalog client script:
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
// Clear the City field
g_form.clearOptions('city');
// Define a mapping of countries (in lowercase) to their respective cities
var countryCityMapping = {
"turkey": [
{ value: "ankara", label: "Ankara" },
{ value: "istanbul", label: "Istanbul" },
{ value: "izmir", label: "Izmir" }
],
"usa": [
{ value: "new_york", label: "New York" },
{ value: "los_angeles", label: "Los Angeles" },
{ value: "chicago", label: "Chicago" },
{ value: "houston", label: "Houston" },
{ value: "phoenix", label: "Phoenix" }
],
"uk": [
{ value: "london", label: "London" },
{ value: "manchester", label: "Manchester" },
{ value: "birmingham", label: "Birmingham" },
{ value: "glasgow", label: "Glasgow" },
{ value: "leeds", label: "Leeds" }
]
// Add more countries and cities as needed
};
// Get the selected country
var selectedCountry = newValue;
g_form.addInfoMessage(selectedCountry);
// Add the cities corresponding to the selected country
if (countryCityMapping[selectedCountry]) {
var cities = countryCityMapping[selectedCountry];
g_form.addOption('city', '', '--Select a City--'); // Add a placeholder option
cities.forEach(function(city) {
g_form.addOption('city', city.value, city.label);
});
} else {
g_form.addOption('city', '', '--No Cities Available--');
}
}
Here I have mapped for three country only, you can map for as many you want.
This script will add an option based on the country selected from the data in our script.
Note: You can set inactive false for all the city and try to populate the data from script.
This is tested in my PDI.
Hope this helps!
"If you found my answer helpful, please like and mark it as an "accepted solution". It helps others find the solution more easily and supports the community!"
Thank You
Juhi Poddar
