Donation Block: Dropdown list of amount

To change list of amount in Donation Block to dropdown format, like this.

and this.

You can use this code to Page Header Injection (page where you use donation block)

<!-- @tuanphan - Donation Form Dropdown -->
<script>
(function () {
  function init(block) {
    const fieldset = block.querySelector('fieldset.form-item.field.radio');
    if (!fieldset) return;

    const optionData = Array.from(fieldset.querySelectorAll('.option')).map(el => {
      const input = el.querySelector('input[type="radio"]');
      const label = el.querySelector('.radio-label');
      return {
        value: input.value,
        text: (label ? label.textContent : input.value).trim(),
        isCustom: input.classList.contains('custom-donation-amount-option'),
        input
      };
    });

    if (!optionData.length) return;

    const select = document.createElement('select');
    select.className = 'donation-amount-select';
    select.style.width = '100%';

    optionData.forEach(o => {
      const opt = document.createElement('option');
      opt.value = o.isCustom ? 'custom' : o.value;
      opt.textContent = o.text;
      select.appendChild(opt);
    });

    fieldset.parentNode.insertBefore(select, fieldset);
    fieldset.style.display = 'none';

    const checked = optionData.find(o => o.input.checked) || optionData[0];
    select.value = checked.isCustom ? 'custom' : checked.value;

    function applySelection() {
      const v = select.value;
      const target = v === 'custom'
        ? optionData.find(o => o.isCustom)
        : optionData.find(o => o.value === v);
      if (!target) return;

      target.input.checked = true;
      ['click','input','change'].forEach(type => {
        target.input.dispatchEvent(new Event(type, { bubbles: true }));
      });

      if (v === 'custom') {
        const customInput = block.querySelector('.custom-donation-amount-input');
        if (customInput) customInput.focus();
      }
    }

    select.addEventListener('change', applySelection);
    applySelection();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('.sqs-block-form.donation-form').forEach(init);
    });
  } else {
    document.querySelectorAll('.sqs-block-form.donation-form').forEach(init);
  }
})();
</script>