Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You're trying to nest <code>&lt;optgroup&gt;</code> elements but that is invalid HTML. <a href="http://www.w3.org/TR/html5/the-button-element.html#the-optgroup-element" rel="nofollow">HTML-5 has this to say about <code>&lt;optgroup&gt;</code></a>:</p> <blockquote> <p><strong>Contexts in which this element can be used:</strong><br> As a child of a <code>select</code> element.<br> <strong>Content model:</strong><br> Zero or more <code>option</code> elements.</p> </blockquote> <p>And <a href="http://www.w3.org/TR/html4/interact/forms.html#edef-OPTGROUP" rel="nofollow">HTML-4 has this to say</a>:</p> <blockquote> <p>In HTML 4, all <code>OPTGROUP</code> elements must be specified directly within a <code>SELECT</code> element (i.e., groups may not be nested).</p> </blockquote> <p>So you're giving the browser invalid HTML and the browser is trying to correct it by unnesting the invalidly nested <code>&lt;optgroup&gt;</code> elements. Once the browser has finished correcting your HTML your nesting is gone and get the odd behavior that you're seeing.</p> <p>How do you solve this? You could use nested <code>&lt;ul&gt;</code>s (inside a hidden <code>&lt;div&gt;</code>) for the JavaScript version and a completely different <code>&lt;select&gt;</code> without nested <code>&lt;optgroup&gt;</code> elements for the non-JavaScript version. You could also try playing tricks with an extra depth attribute so that your JavaScript could rebuild the nesting (I've done this before, doesn't mean that it is a good idea just that it is possible).</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload