Have you tried creating a custom field type?

https://our.umbraco.org/documentation/Add-ons/umbracoforms/developer/extending/Adding-a-Fieldtype

All you need is a class and a view to render your custom Razor/HTML.

Let me know if you need help.

Edit - in fact I have an example with select/optgroup/option elements:

C# class:

public sealed class ProductList : HiddenField
{
    public ProductList()
    {
        Id = new Guid("b0643a6b-01a8-45bb-baf0-333daf8396d7");
        FieldTypeViewName = "FieldType.ProductList.cshtml";
        Name = "ProductList";
        Description = "Renders a dropdown containing a list of products.";
        SortOrder = 1;
        Icon = "icon-list";
        DataType = FieldDataType.String;
    }
}

Razor/HTML:

@model Umbraco.Forms.Mvc.Models.FieldViewModel

@{
    var helper = new UmbracoHelper(UmbracoContext.Current);
    var currentPage = helper.TypedContent(UmbracoContext.Current.PageId);
    var products = currentPage.DocumentTypeAlias.Equals(Literals.DocumentTypes.ProductRegistration)
        ? currentPage["productRegistrationList"] as dynamic
        : null;
}

@if (products != null)
{
    <label class="fieldLabel">
        Please select a product
    </label>
    <select name="@Model.Name" id="@Model.Id">
        @renderOptionsForDropdownList(products)
    </select>
}

@helper renderOptionsForDropdownList(dynamic list)
{
    foreach (var item in list)
    {
        <optgroup label="@item["productRegistration"]">
            @foreach (var product in item["productList"])
            {
                if (!string.IsNullOrEmpty(product))
                {
                    <option value="@product">
                        @product
                    </option>
                }
            }
        </optgroup>
    }
}

is working on a reply...