Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Grouping Dropdown Options Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ var optgroups = { "Group 1": [ { value: '1', text: 'Option 1' }, { value: '2', text: 'Option 2' } ], "Group 2": [ { value: '3', text: 'Option 3' }, { value: '4', text: 'Option 4' } ] }; $.each(optgroups, function(group, options) { var optgroup = $("<optgroup></optgroup>").attr("label", group); $.each(options, function(index, option) { optgroup.append($("<option></option>").attr("value", option.value).text(option.text)); }); $("#dropdown").append(optgroup); }); }); </script> </head> <body> <select id="dropdown"> <option value="">Select an option</option> </select> </body> </html>
console output