Comment on page
Dropdown with groups (categories)
How to add groups for WordPress dropdown element so the items belong to categories/subcategories.
In the below JavaScript code simply change
field_name
to the dropdown field name, and add or edit red1
, blue1
, green1
with the first item that should belong to the group. If you have multiple dropdowns you can extend the groups
object.You can copy paste this code under Super Forms > Settings > Custom JS.
var groups = {
field_name: {
red1: 'Red colors:',
blue1: 'Blue colors:',
green1: 'Green colors:'
},
//another_dropdown_field: {
// value1: 'First group:',
// value2: 'Second group:',
// value3: 'Third group:'
//}
};
Object.keys(groups).forEach(function(fieldName){
var field = document.querySelector('.super-field input[name="'+fieldName+'"]'); if(!field) return;
var list = field.parentNode.querySelector('.super-dropdown-list'); if(!list) return;
Object.keys(groups[fieldName]).forEach(function(dropdownValue){
var node = document.createElement('strong'),
item = document.querySelector('li[data-value="'+dropdownValue+'"]');
node.style.width = '100%';node.style.display = 'inline-block'; node.style.padding = '5px 0px 5px 3px';
node.innerText = groups[fieldName][dropdownValue];
item.parentNode.insertBefore(node, item);
});
});