Range function inserts extra selectable and unselectable lines

I have this code in .Params frontmatter:

tag0: Select a tag
tag1: Tag
  - group: VEHICLES
  - val: Passenger cars
    item: Passenger cars
  - val: Sports cars
    item: Sports cars
  - val: SUVs
    item: SUVs
  - val: Trucks
    item: Trucks
  - val: Heavy-duty trucks
    item: Heavy-duty trucks
  - val: Vans
    item: Vans
  - val: Commercial vehicles
    item: Commercial vehicles
  - val: Special vehicles
    item: Special vehicles
  - group: MOTORCYCLES
  - val: Street motorcycles
    item: Street motorcycles
  - val: Off-road motorcycles
    item: Off-road motorcycles
  - val: Scooters
    item: Scooters
  - val: Electric Scooters
    item: Electric Scooters
  - val: Scooters for kids
    item: Scooters for kids

and this html:

          <label class="required" for="tags">{{ .Params.tag0 }}:</label>
          <select class="form-control" name="tags" size="1" required>
            <option value="">{{ .Params.tag1 }}</option>
          {{ if .Params.tags }}
          {{ range .Params.tags }}
            <optgroup label="{{ .group }}">
              <option value="{{ .val }}">{{ .item }}</option>
          {{ end }}
          {{ end }}

I will appreciate if someone can tell me why this happens and if this can be fixed.

Do you have a taxonomies key in your site configuration? If yes, please post it. If not, try disabling the tags taxonomy:

category = categories

Also, you don’t need to do this:

{{ if .Params.tags }}
  {{ range .Params.tags }}
    {{ something }}
  {{ end }}
{{ end }}

The range statement will skip the block if .Params.tags is falsy. Do this instead:

{{ range .Params.tags }}
  {{ something }}
{{ end }}

…and finally your HTML is invalid as most of the closing optgroup are missing.

jmooring, thank you for looking into the problem. I’ve disabled

#  category = "category"
#  tags = "tags"

and removed the if statement:

          {{ range .Params.tags }}
            <optgroup label="{{ .group }}">
              <option value="{{ .val }}">{{ .item }}</option>
          {{ end }}

so far the problem is still there.

I think that the structure of your front matter doesn’t match what you’re doing in your template. In JSON, I’d write something like that

[ {group: "VEHICLES",
   [ {val: "Passenger cars", item: "Passenger cars"},
     {val: "Sports cars", item: "Sports cars"},
 { group: "MOTORCYCLES", 
  [ {val: "Street ...", item: "Street ..."},
    {val: "Off-road …", item: "Off-road ..."},

From your front matter, I have the impression that you do not have this kind of structure.

Thanks everybody for looking into the problem. I’ve solved the issue by removing the optgroup.
Thought it’s interesting - if the JSON code might work, what would the correct TOML notatin look like?

For that, you’d have to read up on TOML.