diff --git a/src/opnsense/www/js/opnsense.js b/src/opnsense/www/js/opnsense.js
index e0cfa0d897e..9051ed30886 100644
--- a/src/opnsense/www/js/opnsense.js
+++ b/src/opnsense/www/js/opnsense.js
@@ -147,6 +147,7 @@ function setFormData(parent,data) {
targetNode.tokenize2().trigger('tokenize:clear');
}
targetNode.empty(); // flush
+ let optgroups = [];
if (Array.isArray(node[keypart]) && node[keypart][0] !== undefined && node[keypart][0].key !== undefined) {
// key value (sorted) list
// (eg node[keypart][0] = {selected: 0, value: 'my item', key: 'item'})
@@ -155,19 +156,34 @@ function setFormData(parent,data) {
if (String(node[keypart][i].selected) !== "0") {
opt.attr('selected', 'selected');
}
- targetNode.append(opt);
+ let optgroup = node[keypart][i].optgroup ?? '';
+ if (optgroups[optgroup] === undefined) {
+ optgroups[optgroup] = [];
+ }
+ optgroups[optgroup].push(opt);
}
} else{
// default "dictionary" type select items
// (eg node[keypart]['item'] = {selected: 0, value: 'my item'})
$.each(node[keypart],function(indxItem, keyItem){
let opt = $("").attr('label', group).append(items));
+ }
+ }
} else if (targetNode.prop("type") === "checkbox") {
// checkbox type
targetNode.prop("checked", node[keypart] != 0);