$(document).ready(function() { // Initialize Select2 with custom formatting for each dropdown instance $(‘#countrySelectDisplay1, #countrySelectRedirect1’).select2({ placeholder: “Select…”, allowClear: true, templateResult: formatCountry, templateSelection: formatCountry }); $(‘#countrySelectDisplay2, #countrySelectRedirect2’).select2({ placeholder: “Select…”, allowClear: true, templateResult: formatCountry, templateSelection: formatCountry }); // Event listener for the redirect dropdown in Block 1 $(‘#countrySelectRedirect1’).on(‘change’, function() { const selectedCountry = $(‘#countrySelectDisplay1’).val(); const opponentCountry = $(this).val(); if (selectedCountry && opponentCountry) { const url = `https://example.com/${selectedCountry}-vs-${opponentCountry}-head-to-head`; window.location.href = url; } else if (!selectedCountry) { alert(‘Please select your country first.’); } }); // Event listener for the redirect dropdown in Block 2 $(‘#countrySelectRedirect2’).on(‘change’, function() { const selectedCountry = $(‘#countrySelectDisplay2’).val(); const opponentCountry = $(this).val(); if (selectedCountry && opponentCountry) { const url = `https://example.com/${selectedCountry}-vs-${opponentCountry}-head-to-head`; window.location.href = url; } else if (!selectedCountry) { alert(‘Please select your country first.’); } }); }); // Custom function to format dropdown items with flags function formatCountry(country) { if (!country.id) return country.text; const flag = $(country.element).data(‘flag’); const countryName = country.text; return $( ` ${countryName}` ); }

Select Your Country and Opponent