To be able to display Country and its region in Dropdown list of Bricks Builder form, first step is to get the data from json file which contain list of country and regions. I will use sample json file from https://raw.githubusercontent.com/country-regions/country-region-data/master/data.json.
Display Country Name
Put this function code below in php file or snippet plugin.
// Add this to your theme's functions.php file or create a custom plugin
function get_country_data() {
// URL of the JSON data
$json_url = "https://raw.githubusercontent.com/country-regions/country-region-data/master/data.json";
// Fetch and decode the JSON data
$response = wp_remote_get($json_url);
if (is_wp_error($response)) {
return [];
}
$data = json_decode(wp_remote_retrieve_body($response), true);
if (json_last_error() !== JSON_ERROR_NONE) {
return [];
}
// Extract country names and shortcodes
$country_data = array();
foreach ($data as $country) {
$country_data[] = array(
"countryName" => $country["countryName"],
"countryShortCode" => $country["countryShortCode"]
);
}
return $country_data;
}Then add second function so we can use that with parameter in Bricks Builder form select field.
Dont forget to allow the code execution by using this code:
add_filter( 'bricks/code/echo_function_names', function($function_name) {
return [
'@^my_', // Allow all functions that start with "my_"
];
} );Next is add form element in page editor, choose select filed type and put this code in Option box. Add “country” as name attribute (later i need this to make ajax works)
echo:my_display_country('country_name')
// or
Display Country Region
For gettting the chained country region from selected country, i use ajax to minimize “Fat” Dom on select option. Add another field with select type then fill the name attribute with “region”similar to this image:

Then add php code to get the data from json similar to the first step.
Then make ajax request using this Javascript code
function custom_script_get_region()
{
?>
<script>
function initCustomAjaxHandlersGetRegion() {
jQuery(document).ready(function($) {
$('select[name="country"]').change(function() {
var country = $(this).val();
if (country) {
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'get_country_regions',
country: country
},
success: function(response) {
if (response.success) {
var regions = response.data;
var regionSelect = $('select[name="region"]');
regionSelect.empty();
$.each(regions, function(index, region) {
regionSelect.append('<option value="' + region.name + '">' + region.name + '</option>');
});
// Show the region select box
$('select[name="region"]').show();
} else {
alert('Failed to load regions: ' + response.data);
}
}
});
}
});
});
}
initCustomAjaxHandlersGetRegion();
</script>
<?php
}
add_action('wp_footer', 'custom_script_get_region', 99);
