Update 2024-01-19: css for optgroup select2, update option+optgroup from json, sub-modul menu with base url.

assets/css/default.css

@@ -366,6 +366,9 @@ table * .b { font-weight: bold !important; }
 table * .l { text-align: left !important; }
 table * .r { text-align: right !important; }
 table * .c { text-align: center !important; }
+table * .i { font-style: italic; }
+table * .s { font-size: .65em; }
+table * .bi { font-weight: bold; font-style: italic; }
 table * .wr { white-space: normal !important; }
 table * .nwr { white-space: nowrap !important; }
 table * .awr, table * .awr-400 { white-space: nowrap !important; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
@@ -375,6 +378,18 @@ table * .nb { border: 0 !important; }
 
 ul.dtr-details li.hidden { visibility: hidden !important; display: none !important; }
 
+/******************************** Select2 ********************************/
+
+.select2-results__option[role="group"] {
+    padding-left: 0 !important;
+}
+.select2-results__group {
+    /*background-color: var(--bs-gray-200, #9da5b1);*/
+    color: var(--bs-black, #000) !important;
+    text-transform: uppercase;
+    font-weight: bolder !important;
+}
+
 /******************************** Autocomplete ********************************/
 
 .bootstrap-autocomplete.dropdown-menu{

assets/js/fonia3.js

@@ -4,9 +4,9 @@
     Desc.         : JS - Fonia Custom Class v3
     Created By    : Siau Pheng ([email protected]).
     Created Date  : June 19th, 2009.
-    Last Modified : December 30th, 2023.
+    Last Modified : January 18th, 2024.
 
-    (c) 2009 - 2023, 3FONIA Software; WWW.3FONIA.COM.
+    (c) 2009 - 2024, 3FONIA Software; WWW.3FONIA.COM.
 
 *******************************************************************/
 
@@ -234,6 +234,7 @@ var FoniaJS = {
         }.bind(this));
     },
     genWinToolBut: function(menu) {//oke
+        if (!menu) return '';
         var smenu = '';
         if (typeof menu === 'object'){
             var ma = ' me-sm-2'; smenu = '<div class="col-12 col-sm-6 my-0 mx-sm-0 text-center text-sm-start">';
@@ -256,6 +257,7 @@ var FoniaJS = {
         return smenu;
     },
     genToolButton: function(menu) {//oke
+        if (!menu) return '';
         var smenu = '';
         if (typeof menu === 'object'){
             var ma = ' me-sm-2'; smenu = '<div class="row mt-2 my-sm-2 justify-content-sm-between"><div class="col-sm-6 text-center text-sm-start">';
@@ -706,17 +708,26 @@ Request.JSONF = function(options){//oke
         /*if (ini.css) {
             optIni.prop('disabled', ini.css=='disabled');
         }*/
+        if (!optIni) return;
         if (ini.avalue) {
-            optIni.empty().trigger('change');
+            optIni.empty();
+            var o_group = 0;
             $(ini.avalue).each(function(n, i) {
+                if (i.optgroup) {
+                    if (0 < o_group++) optIni.append('</optgroup>');
+                    optIni.append('<optgroup label="'+i.optgroup+'">');
+                    return;
+                }
                 optIni.append($('<option>', {
                     value: i.value, text: i.html || '\u00A0', label: i.text || '', 'olabel': i.label || ''
-                })).trigger('change');
+                }));
             });
+            if (o_group > 0) optIni.append('</optgroup>');
         }
         if (ini.value) {
-            optIni.val(ini.value).trigger('change');
+            optIni.val(ini.value);
         }
+        optIni.trigger('change');
     };    
     var make_table = function(ini){//oke
         var divData = $('#'+ini.id).empty();