Looking for HTML "select" which can handle nested groupings

Question

I am looking for a HTML "select" which can display in groups.

Chosen -- http://harvesthq.github.io/chosen/ can do this but only one level of grouping

I am looking of nested groupings

ex:

Product
   SW
     C1
     C2
   HW
   Infrastrcture
     S1
     S2

Maybe combine with some css. Check here http://stackoverflow.com/questions/5288792/how-to-indent-multiple-levels-of-select-optgroup-with-css — Dipen Shah, Aug 12 '15 at 20:58
The solution in the link also has same issue even though with CSS. Which JQuery plugin can I look for? — KK99, Aug 13 '15 at 02:32
http://www.w3.org/TR/html401/interact/forms.html#h-17.6 HTML prevents that. The only option you have is CSS padding and/or one of the answers mentioned below. — Dipen Shah, Aug 13 '15 at 11:58

score 0 · Answer 1 · answered Aug 12 '15 at 20:43

0

You can always indent the options text like below to get the desired output

<select>
    <option>Product</option>
    <option>&nbsp;SW</option>
    <option>&nbsp;&nbsp;C1</option>
    <option>&nbsp;&nbsp;C2</option>
    <option>&nbsp;HW</option>
    <option>&nbsp;Infrastrcture</option>
    <option>&nbsp;&nbsp;S1</option>
    <option>&nbsp;&nbsp;S2</option>
</select>

Check here how it looks like.

answered Aug 12 '15 at 20:43

kiranvj

27,729
5
65
72

I would use this as my last option :) Thanks – KK99 Aug 12 '15 at 20:48

Mike Angel · Answer 2 · 2015-08-12T20:42:10.680

-1

I believe what you are looking for is something like this:

http://www.w3schools.com/tags/tag_optgroup.asp

Here is the code of the reference site:

<select>
   <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
   </optgroup>
   <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
   </optgroup>
</select>

edited Aug 12 '15 at 20:42

answered Aug 12 '15 at 20:29

Mike Angel

51
8

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Dipen Shah Aug 12 '15 at 20:38
Indeed I will update the answer, thanks for the tip! – Mike Angel Aug 12 '15 at 20:39
Thanks. I am looking for more than 1 group. Optgroup supports only one level of grouping I believe – KK99 Aug 12 '15 at 20:47
That is correct it supports one group. Anyway you can use ` ` to add the desired space, disable attribute so the option cannot be selected and some `CSS` to give a the disabled option a white background and make the text bold. Example: `` – Mike Angel Aug 12 '15 at 20:57

Looking for HTML "select" which can handle nested groupings

2 Answers2