dropdown_option_grouping.js

window.onload = function(){
//First Group
    var select = document.getElementById("ff_136_dropdown"); //change the dropdown id
    
   
    var optgroup = document.createElement("optgroup");
    optgroup.label = "Foyla Title";
    
    var option1 = select.querySelector('option[value="Option 1"]'); //change the value of the option
    var option2 = select.querySelector('option[value="Option 2"]'); //change the value of the option
    
    optgroup.appendChild(option1);
    optgroup.appendChild(option2);

    select.insertBefore(optgroup, select.children[1]);
   
//Second Group
    var optgroup2 = document.createElement("optgroup");
    optgroup2.label = "Dusra Title";
    
    var option3 = select.querySelector('option[value="Option 3"]');
    var option4 = select.querySelector('option[value="Option 4"]');
    
    optgroup2.appendChild(option3);
    optgroup2.appendChild(option4);
    
    select.insertBefore(optgroup2, select.children[2]);
  
 //Third Group
    var optgroup3 = document.createElement("optgroup");
    optgroup3.label = "Tisra Title";
    
    var option5 = select.querySelector('option[value="Option 5"]');
    var option6 = select.querySelector('option[value="Option 6"]');
    
    optgroup3.appendChild(option5);
    optgroup3.appendChild(option6);
    
    
    select.insertBefore(optgroup3, select.children[3]);
    
//Fourth Group
    var optgroup4 = document.createElement("optgroup");
    optgroup4.label = "Choutha Title";
    
    var option7 = select.querySelector('option[value="Option 7"]');
    var option8 = select.querySelector('option[value="Option 8"]');
    
    optgroup4.appendChild(option7);
    optgroup4.appendChild(option8);
    
    select.insertBefore(optgroup4, select.children[4]);

}