Error: End tag for 'optgroup' which is not finished. You have probably failed to
include a required child element. Hence the parent element is "not finished",
not complete.
I want to achieve something like this in select options.
USA
UK
--
Afghanistan
I want to put few important countries on top and then a non-selectable divider and then ordered list of remaining countries.
I put this divider using empty 'optgroup'. While it works perfectly in all browser, I get validation error.
What could be other approaches to implement this?
Similar to what @ZippyV wrote, you can just use an <option> and make it be disabled:
<option disabled='disabled'>--</option>
That won't be selectable. Also if it were me I'd use an m-dash and not two hyphens:
<option disabled='disabled'>—</option>