Range function inserts extra selectable and unselectable lines

support
1

I have this code in .Params frontmatter:

tag0: Select a tag
tag1: Tag
tags: 
  - 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 }}
            </optgroup>
          </select>

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

2

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

[taxonomies]
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 }}
3

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

4

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

[taxonomies]
#  category = "category"
#  tags = "tags"

and removed the if statement:

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

so far the problem is still there.

5

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.

6

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?

7

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