Hi! I understand you're trying to filter regions based on country selection. Here's what I suggest:

When you call /countries, it returns all countries with their IDs / some unique identifier. You can then call /regions (which returns country_id) and use this country_id as a grouping column for your region select box. Just make sure to enable these key options in your form:

• Turn on "Use AJAX for Cascade Options?"
• Set the "Field Id to Control Available Options Based on Grouping" to the country field and map it in the Grouping column. 

This will create an automatic cascade effect - the region select box will only show options associated with the selected country based on the ID mapping. It's more reliable than trying to chain external API calls.

Refer the attached Joget App for your reference. Hope this helps!

APP_jsonApiFormOptions-1-20241204060527.jwa

Thank you very much Varnaa , your example app helped me better understand Joget. I will apply it to cases where the API returns all data.

However, in my example, the API needs a parameter for filtering. https://restcountries.com/v3.1/regions => doesn't work This API requires a single parameter (region from API: https://restcountries.com/v3.1/all which is selected by users to filter) Example: When user selects region: Asia The API will reload with: https://restcountries.com/v3.1/region/Asia

If I use custom HTML script to reload when selecting from country select, it works, but this approach isn't optimal and there will be data returned when viewing details:

$.ajax({
        url: `https://restcountries.com/v3.1/region/${region}`,
        method: 'GET',
        success: function(countries) {
            countrySelect.empty();
            countrySelect.append('<option value="">Select country</option>');
            countries.sort((a, b) => a.name.common.localeCompare(b.name.common));
            countries.forEach(country => {
                countrySelect.append(
                    `<option value="${country.name.common}">${country.name.common}</option>`
                );
            });
            countrySelect.trigger('change');
        },
        error: function() {
            countrySelect.empty();
            countrySelect.append('<option value="">Error loading country list</option>');
        }
    });

Do you have any ideas?

Maybe you can try a different source of data with all the details. Refer: https://github.com/lukes/ISO-3166-Countries-with-Regional-Codes

You can use the json file to populate your select box and then use the inbuilt grouping options. 

Thank you very much ! Varnaa  ^_^

I understand, I can get the country data, but in my case I need to use 2 select boxes to filter for a different purpose. The API requires a parameter to be passed in order to retrieve the data. Is there any way in Joget to get the data form to pass as I want, is there any way to get form data, besides using custom HTML to handle scripts?

<script>
$(document).ready(function() {
    const regionSelect = FormUtil.getField("select_region");
    const countrySelect = FormUtil.getField("select_child");
    const addressField = FormUtil.getField("address");

    function setAddressReadonly() {
        $("input[name='address']").prop('readonly', true);
        $("input[name='address']").prop('disabled', true);
    }
    setAddressReadonly();

    function loadCountriesByRegion(region) {
        if (!region) return;
        
        countrySelect.empty();
        countrySelect.append('<option value="">Đang tải...</option>');
        
        $.ajax({
            url: `https://restcountries.com/v3.1/region/${region}`,
            method: 'GET',
            success: function(countries) {
                countrySelect.empty();
                countrySelect.append('<option value="">Chọn quốc gia</option>');
                
                countries.sort((a, b) => a.name.common.localeCompare(b.name.common));
                
                countries.forEach(country => {
                    countrySelect.append(
                        `<option value="${country.name.common}">${country.name.common}</option>`
                    );
                });
                
                countrySelect.trigger('change');
            },
            error: function() {
                countrySelect.empty();
                countrySelect.append('<option value="">Lỗi tải danh sách quốc gia</option>');
            }
        });
    }
    
    
    regionSelect.on('change', function() {
        const selectedRegion = $(this).val();
        if (selectedRegion) {
            loadCountriesByRegion(selectedRegion);
        } else {
            countrySelect.empty();
            countrySelect.append('<option value="">Vui lòng chọn vùng trước</option>');
        }
        updateAddress();
    });
    
    countrySelect.on('change', function() {
        updateAddress();
    });
    
    function updateAddress() {
        
        $("input[name='address']").prop('readonly', false);
        $("input[name='address']").prop('disabled', false);
        
        const region = regionSelect.val();
        const country = countrySelect.val();
        
        if (region && country) {
            const formattedAddress = `${country}, ${region}`;
            addressField.val(formattedAddress).trigger("change");
        } else {
            addressField.val('').trigger("change");
        }

        setAddressReadonly();
    }
});
</script>

Sorry, I can't think of a better alternative for your current setup. However, if you're planning to reuse this country/region/address functionality across multiple apps in your platform, you might want to consider building a separate reference app and importing the data into your database. This way, you can reuse it across all apps without relying on external APIs.

And hey, don't worry too much about using custom HTML in Joget - it's completely fine! After all, Joget is a low-code platform, not a no-code one, so sometimes custom code is the best way to get exactly what you need.

If you found this answer helpful, please upvote and accept it! Let me know if you need any other help.

Thank you for your support Varnaa