[wp-trac] [WordPress Trac] #47692: Optgroup in Customizer Select Control

[WordPress Trac]

#47692: Optgroup in Customizer Select Control
-------------------------+-----------------------------
 Reporter:  chintan1896  |       Owner:  (none)
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  Future Release
Component:  Customize    |     Version:  3.4
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:
-------------------------+-----------------------------

Comment (by Lwangaman):

 After some testing in javascript, I have come up with this working code:

 {{{#!javascript
 <select
         <# _.each( _.extend( inputAttrs ), function( value, key ) { #>
                 {{{ key }}}="{{ value }}"
         <# }); #>
         >
         <# _.each( data.choices, function( val, key ) { #>
                 <#
                 var value, text;
                 if ( _.isObject( val ) ) {
                         if(val.hasOwnProperty('value') &&
 val.hasOwnProperty('text') ){
                                 value = val.value;
                                 text = val.text;
                                 #>
                                 <option value="{{ value }}">{{ text
 }}</option>
                                 <#
                         }
                         else{
                                 //if val is an object but doesn't directly
 have "value" or "text" properties, we are probably dealing with an
 optgroup
                                 text = key;
                                 value = val;
                                 #>
                                 <optgroup label="{{ text }}">
                                 <#
                                 var optgroupvalue, optgrouptext;
                                 if( _.isArray( value ) ){
                                         _.each( value, function( val, key
 ) {
                                                 if( _.isObject( val ) &&
 val.hasOwnProperty('value') && val.hasOwnProperty('text') ){
                                                         optgroupvalue =
 val.value;
                                                         optgrouptext =
 val.text;
                                                         #>
                                                         <option value="{{
 optgroupvalue }}">{{ optgrouptext }}</option>
                                                         <#
                                                 }
                                         } );
                                 }
                                 else{
                                         _.each( value, function( val, key
 ) {
                                                 optgroupvalue = key;
                                                 optgrouptext = val;
                                                 #>
                                                 <option value="{{
 optgroupvalue }}">{{ optgrouptext }}</option>
                                                 <#
                                         } );
                                 }
                                 #>
                                 </optgroup>
                                 <#
                         }
                 } else {
                         value = key;
                         text = val;
                         #>
                         <option value="{{ value }}">{{ text }}</option>
                         <#
                 }
                 #>
         <# } ); #>
 </select>

 }}}

 And here are my working examples:

 * Example 1 : only top level options, using objects with "value" and
 "text" properties (already available in current wordpress core)
 {{{#!javascript

 wp.customize.control.add(new wp.customize.Control('myoptgroup2', {
         type: 'select',
         settings: 'myoptgroup2',
         section: 'a_section_of_my_options',
         label: 'My OptGroup with Animal choices',
         choices: [
                 { value: 'tiger', text: 'Tiger' },
                 { value: 'lion', text: 'Lion' },
                 { value: 'eagle', text: 'Eagle' },
                 { value: 'whale', text: 'Whale' },
         ]
 }));

 }}}

 * Example 2: only top level options, using key => value pairs (already
 available in current wordpress core)
 {{{#!javascript

 wp.customize.control.add(new wp.customize.Control('myoptgroup2', {
         type: 'select',
         settings: 'myoptgroup2',
         section: 'a_section_of_my_options',
         label: 'My OptGroup with Animal choices',
         choices: {
                 'tiger' : 'Tiger',
                 'lion' : 'Lion',
                 'eagle' : 'Eagle',
                 'whale' : 'Whale',
         }
 }));

 }}}

 * Example 3: both top level options and optgroup options, using array of
 objects with "value" and "text" properties
 {{{#!javascript

 wp.customize.control.add(new wp.customize.Control('myoptgroup2', {
         type: 'select',
         settings: 'myoptgroup2',
         section: 'a_section_of_my_options',
         label: 'My OptGroup with Animal choices',
         choices: {
                 'Land' : [
                         { value: 'tiger', text: 'Tiger' },
                         { value: 'lion', text: 'Lion' }
                 ],
                 'Sea': [
                         { value: 'whale', text: 'Whale' },
                         { value: 'salmon', text: 'Salmon' }
                 ],
                 'Air': [
                         { value: 'eagle', text: 'Eagle' },
                         { value: 'woodpecker', text: 'Woodpecker' }
                 ],
                 'mammals' : 'Mammals',
                 'jungle' : 'Jungle wildlife'
         },
 }));

 }}}


 * Example 4: both top level options and optgroup options, using objects
 with key => value pairs
 {{{#!javascript

 wp.customize.control.add(new wp.customize.Control('myoptgroup2', {
         type: 'select',
         settings: 'myoptgroup2',
         section: 'a_section_of_my_options',
         label: 'My OptGroup with Animal choices',
         choices: {
                 'Land': { 'tiger': 'Tiger', 'lion': 'Lion' },
                 'Sea': { 'whale': 'Whale', 'salmon': 'Salmon' },
                 'Air': { 'eagle': 'Eagle', 'woodpecker': 'Woodpecker' },
                 'mammals' : 'Mammals',
                 'jungle' : 'Jungle wildlife'
         },
 }));

 }}}

 Of course in the last two examples, you could insert the top level options
 either with key:value pairs, or with an object that has "value" and "text"
 properties. So you can mix the flavours every which way, and they all
 work.
 Here is an image of the result of the last two examples:
 [[Image(https://imgur.com/bMA4n3k)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47692#comment:24>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform