[Q] Customizing advanced select `optionTemplate`

[marceloverdijk]

The storefront listing-grid.html uses this select:

            <select data-hs-select='{
                "placeholder": "Sort",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 inline-flex shrink-0 justify-center items-center gap-x-1.5 border border-transparent text-sm text-muted-foreground-1 rounded-lg underline-offset-4 hover:underline hover:text-muted-foreground-2 focus:outline-hidden focus:underline focus:text-muted-foreground-2 before:absolute before:inset-0 before:z-1",
                "dropdownClasses": "inset-e-0 mt-2 p-1 z-20 w-44 bg-select border border-select-line rounded-xl shadow-xl",
                "optionClasses": "flex items-center gap-x-3 py-2 px-3 text-xs sm:text-[13px] text-select-item-foreground hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
              }' class="hidden">
              <option value="">Choose</option>
              <option selected>Bestseller</option>
              <option>Trending</option>
              <option>Price low to high</option>
              <option>Price hight to low</option>
            </select>

I'm creating a similar select so the user can choose a page size.

1. In the dropdown I want to display simple values like 10, 20, 50 and 100.
2. But once selected I want to display e.g. "10 rows per page".
3. I should also be able to extract the actual value, just 10 in this case.

I tried with:

<option value="10">10 rows per page</option>
<option value="20">20 rows per page</option>

This works for 1) and 3) but inside the dropdown the full "10 rows per page" is shown.
Can I customize the optionTemplate to just display the value?