How to Retrieve Values from Dynamic Select Boxes Inside HTML Component in Retool?

I’m currently working on creating dynamic select boxes inside an HTML component in Retool. I’ve successfully generated the select boxes dynamically based on some input data using the following code:

html

Copy code

{{ 
  (() => {
    const data = {
      'name': ['a', 'b', 'c'], 
      'required_fields': [{}, {'link': 'link name'}, {'url': 'url name', 'uuid': 'uuid value'}]
    };

    const targetName = 'c'; // This variable represents the target name for which we want to generate select boxes.
    const optionsArray = ['Option 1', 'Option 2', 'Option 3']; // Array of strings for select box options.

    return data.name.map((name, index) => {
      if (name !== targetName) {
        return ''; // Skip if the name doesn't match the targetName
      }

      const fields = data.required_fields[index];
      if (Object.keys(fields).length === 0) {
        return ''; // No select box if required_fields is empty
      }

      return Object.keys(fields).map(key => {
        const label = fields[key]; // Label for the select box

        // Generate options from optionsArray
        const options = optionsArray.map(option => {
          return `<option value="${option}">${option}</option>`;
        }).join('');

        return `
          <div class="custom-select-container">
            <label for="select-${key}" style="font-weight: bold; font-size: 14px;">${label}:</label>
            <select id="select-${key}" required style="width: 100%; padding: 10px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc;">
              <option value="" disabled selected>Select an option</option>
              ${options}
            </select>
          </div>
        `;
      }).join('');
    }).join('');
  })()
}}

This works perfectly for generating the select boxes dynamically based on my input data.

The problem I'm facing now is how to retrieve the values from these dynamically generated select boxes.
I've tried using standard DOM selectors like document.getElementById() to grab the values, but it couldn't find those elements. I've also tried getting values from the shadowRoot but again no luck.

Does anyone have a solution for how I can collect the selected values from these dynamically generated select boxes in Retool? Any help would be much appreciated!

Hi @Omid_Abbasi, welcome to the forum! :wave:

The HTML component is great for presentation purposes but if we need data to go from Retool to the component and vice-versa, we should create a Custom component.

Here is our doc on how to pass data between your Retool app and a custom component: