Add dropdown options to groups (optgroup)

Ask the community
,
1

Is there a way to add optgroups to dropdowns using Velo? I have several dropdowns with many options, and I would like to add them to optgroups based on the prefix of the option values.

Here’s a simplified example:

<select>
	<option value="A1">Apple</option>
	<option value="A2">Banana</option>
	<option value="A3">Orange</option>
	<option value="B1">Cucumber</option>
	<option value="B2">Carrot</option>
	<option value="B3">Potato</option>
	<option value="C1">Coffee</option>
	<option value="C2">Juice</option>
	<option value="C3">Tea</option>
</select>

And I would like to have them grouped based on value prefix:

<select>
	<!-- if option value begins with A, add to optgroup "Fruits" -->
	<optgroup label="Fruits">
		<option value="A1">Apple</option>
		<option value="A2">Banana</option>
		<option value="A3">Orange</option>
	</optgroup>
	
	<!-- if option value begins with B, add to optgroup "Veggies" -->    
	<optgroup label="Veggies">
		<option value="B1">Cucumber</option>
		<option value="B2">Carrot</option>
		<option value="B3">Potato</option>
	</optgroup>
	
	<!-- if option value begins with C, add to optgroup "Drinks" -->
	<optgroup label="Drinks">
		<option value="C1">Coffee</option>
		<option value="C2">Juice</option>
		<option value="C3">Tea</option>
	</optgroup>
</select>

Thanks!