Hi,

I tried looking in the question library, but didn't see anything that helps directly.

Since LHS uses JQuery UI , we can copy its example.

<label for=\"files\">Select a file</label>\n    <select name=\"files\" id=\"files\">\n      <optgroup label=\"Scripts\">\n        <option value=\"jquery\">jQuery.js</option>\n        <option value=\"jqueryui\">ui.jQuery.js</option>\n      </optgroup>\n      <optgroup label=\"Other files\">\n        <option value=\"somefile\">Some unknown file</option>\n        <option value=\"someotherfile\">Some other file with a very long option text</option>\n      </optgroup>\n    </select>

Caution: This approach is honestly not very smart and for many sub-headers and a long list this would be quite tedious. I'm sure Sawtooth's own experts can come up with a smarter approach.

(At that point you may want to approach it as a grid question with sub-headers and one column. )

Assuming it is Q5 where you need to do this.

$(document).ready(function(){\n\n\n$(\"#Q5 > option:nth-child(2)\").before(\"<optgroup label='Scripts' id='scripts_group'></optgroup>\");\n$(\"option#Q5_1\").clone().appendTo(\"#scripts_group\");\n$(\"option#Q5_2\").clone().appendTo(\"#scripts_group\");\n\n$(\"#Q5 > option#Q5_1\").remove();\n$(\"#Q5 > option#Q5_2\").remove();\n\n$(\"#Q5_3\").before(\"<optgroup label='Other Files' id='other_group'></optgroup>\");\n$(\"option#Q5_3\").clone().appendTo(\"#other_group\");\n$(\"option#Q5_4\").clone().appendTo(\"#other_group\");\n\n$(\"#Q5 > option#Q5_3\").remove();\n$(\"#Q5 > option#Q5_4\").remove();\n\n});

The logic is rather simple. We create that optgroup node which is the sub-header, and place it before the 2nd child (first is the default text).

We clone the nodes that would be part of this group, and then remove the original node for these (so that these do not appear twice).

This is assuming your use case is you just want read-only sub-headers and single-select dropdown.

Hope it helps at least somewhat.

DropDown