Data structure for SmarSelect ListItem

Questions
1

I have a smart select as shown below:

<ListItem title = 'Suffix'
          smartSelect
          smartSelectParams = {{openIn: 'popup',
searchbar: true, searchbarPlaceholder: 'Search for suffix'}}>
  <select name = 'suffix'>
    <optgroup label = 'I'>
      <option value = 'I'>I</option>
      <option value = 'II'>II</option>
      <option value = 'III'>III</option>
      <option value = 'IV'>IV</option>
      <option value = 'V'>V</option>
    </optgroup>
    <optgroup label = 'J'>
      <option value = 'Junior'>Junior</option>
    </optgroup>
    <optgroup label = 'S'>
      <option value = 'Senior'>Senior</option>
    </optgroup>
  </select>
</ListItem>

Question: What type of data structure is the <optgroup>?

Question: Does the select and support an array data structure or some iterable data structure that I could use Svelte each with.

Thanks

2

These question are just common JS things. It can be any data structure you can loop/iterate to make such output, e.g. object where prop key is a label and value is an array with options, etc.