Support for optgroup in Drop-down Form Fields


#1

Some of our drop-down fields have 13-23 options. It would sure be nice to use the tag on these fields. It’s supported by all browsers.

My work around is below. As you can see, its pretty cluttered and would help make it easier to use.


#2

I am also looking for the same thing! Were you able to do it Phillip?

Please let me know.
Thanks.


#3

Thanks for submitting this idea, Phillip. Always love hearing from you. 

Just so I know, is this mostly for aesthetic purposes? You can’t actually click the optgroup itself, correct? Just want to make sure we have the full picture of what pain this solves for you. 

Thanks!


#4

No, I haven’t been able to do this.


#5

Yes, it’s purely aesthetic. The option groups are not clickable. They are intended to organize long lists of options so users can make their decision faster.


#6

Hello Justin,
Thank you for considering the issue that both I and Phillip are feeling is needed. I hope there are many more like us who would like to see this new function working.

So, is there any chance we will have this function available or able to use some sort of scripts to do this soon?

Thanks.


#7

Surprise you still don’t have the option…


#8

I’m wondering if this is going to become an option as well. I have several campuses around the country that I wanted to sort out by state. Something like this would be helpful.


#9

I was able to add this functionality using jQuery’s .slice() and .wrapAll() methods.

  1. Start by selecting all the field options. In my case $("#program option") because my field name is “Program” so the ID is “program”.
  2. Then slice the options where you want the <optgroups>. The options are indexed starting with 0. Since 0 is “Select a Program”, we start with 1 and end at option 4 to select only the 3 options we want in the first optgroup.
  3. Lastly, add the <optgroup> tag using .wrapAll().

Repeat the steps for all Optgroups you desire. Below is the final code I used:

// Add optgroups
$( "#program option" ).slice( 1, 4 ).wrapAll("<optgroup label='Business and Criminal Justice' />");
$( "#program option" ).slice( 4, 15 ).wrapAll("<optgroup label='Medical and Dental' />");
$( "#program option" ).slice( 15 ).wrapAll("<optgroup label='Technical and Industrial' />");

#10

@Phillip - until we implement this in full, I think this could serve as really useful article in Tips & Scripts.

I’m going to send you a PM.