Select fields in Systeme.io

<script>
  // 1. Define as many fields as you like here:
  const fieldsConfig = [
    {
      inputId: "field-ec137bcd",
      placeholderText: "Please choose a city...",
      selectOptions: [
        { value: "Paris", text: "Paris" },
        { value: "NY",    text: "New York" },
        { value: "LA",    text: "Los Angeles" }
      ],
      defaultValue: "",
      hideOriginalInput: true
    },
    {
      inputId: "field-b784a40e",
      placeholderText: "Select a color...",
      selectOptions: [
        { value: "red",   text: "Red" },
        { value: "green", text: "Green" },
        { value: "blue",  text: "Blue" }
      ],
      defaultValue: "green",
      hideOriginalInput: true
    },
    // …add more field definitions here
  ];

  // Configuration for retry mechanism
  const retryConfig = {
    maxRetries: 10,        // Maximum number of retry attempts
    retryDelay: 1000,      // Delay between retries in milliseconds (1 second)
    checkInterval: 100     // Initial check interval in milliseconds
  };

  // Function to process fields with retry logic
  function processFieldsWithRetry(attempt = 0) {
    // Check if the first field is available
    const firstField = document.getElementById(fieldsConfig[0].inputId);

    if (!firstField) {
      if (attempt < retryConfig.maxRetries) {
        console.log(`First field not found, retrying in ${retryConfig.retryDelay}ms... (Attempt ${attempt + 1}/${retryConfig.maxRetries})`);
        setTimeout(() => {
          processFieldsWithRetry(attempt + 1);
        }, retryConfig.retryDelay);
        return;
      } else {
        console.error(`First field #${fieldsConfig[0].inputId} not found after ${retryConfig.maxRetries} attempts. Aborting.`);
        return;
      }
    }

    // First field is available, proceed with processing all fields
    console.log('First field found, processing all fields...');
    processAllFields();
  }

  // Function to process all fields
  function processAllFields() {
    fieldsConfig.forEach(cfg => {
      const originalInput = document.getElementById(cfg.inputId);
      if (!originalInput) {
        console.error(`Input #${cfg.inputId} not found.`);
        return;
      }

      // build the <select>
      const select = document.createElement("select");
      select.className = originalInput.className;

      // placeholder
      const placeholder = document.createElement("option");
      placeholder.value    = "";
      placeholder.text     = cfg.placeholderText;
      placeholder.disabled = true;
      placeholder.selected = true;
      select.appendChild(placeholder);

      // actual options
      cfg.selectOptions.forEach(opt => {
        const o = document.createElement("option");
        o.value = opt.value;
        o.text  = opt.text;
        if (opt.value === cfg.defaultValue) {
          o.selected = true;
          // also sync initial value
          changeValue(originalInput, opt.value);
        }
        select.appendChild(o);
      });

      // insert into DOM, hide original if requested
      originalInput.parentNode.insertBefore(select, originalInput.nextSibling);
      if (cfg.hideOriginalInput) {
        originalInput.style.display = "none";
      }

      // keep them in sync on change
      select.addEventListener("change", () => {
        changeValue(originalInput, select.value);
        console.log(`Input #${originalInput.id} value changed to "${select.value}".`);
      });
    });
  }

  // Initialize the process when the page loads
  window.addEventListener('load', () => {
    // Start with a small delay to ensure DOM is fully ready
    setTimeout(() => {
      processFieldsWithRetry();
    }, retryConfig.checkInterval);
  });

  // this helper makes sure any listeners on the original input fire as usual
  function changeValue(input, value) {
    Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")
          .set.call(input, value);
    input.dispatchEvent(new Event("input", { bubbles: true }));
  }
</script>