Cacher is the code snippet organizer for pro developers

/*
Author: Bold Commerce (Morgan)
Date Created: 11/25/2016
Last Updated: 11/25/2016

Purpose: to replace the native Recurring Orders frequency selection div with a new single selector 
with custom options that link to and update the original.

Note: it is recommended to create a style that hides the frequency_div class on document ready 
while the script itself hides it on window load.
*/
function setup_recurring_frequency(){

  //ro elements and properties
  var frequency_types = {days:1,weeks:2,months:3,years:4,invalid:5};
  var frequency_div = document.getElementsByClassName('frequency_div')[0];
  var recurring_label = document.getElementsByClassName('recurring_div')[0].querySelector('label');
  var hover_modal = document.getElementsByClassName('recurring_div')[0].querySelector('.hover_modal');

  //custom options
  var frequency_options = [
    [frequency_types.invalid, 0, 'Please Select Shipping Interval'], 
    [frequency_types.weeks, 1, 'Weekly'],
    [frequency_types.weeks, 2, 'Bi-Weekly'],
    [frequency_types.months, 1, 'Monthly'],
    [frequency_types.months, 2, 'Bi-Monthly']
  ];

  //create the option selector
  var frequency_dropdown = document.createElement('select');

  //populate the option selector
  frequency_options.forEach(function(option){

    var node = document.createElement('option');
    node.setAttribute('data-frequency-type', option[0]);
    node.setAttribute('data-frequency-num', option[1]);
    node.text = option[2];
    frequency_dropdown.add(node);

  });

  //on change of the new selector, update the original
  frequency_dropdown.addEventListener('change', function(){

    var selected_option = this.options[this.selectedIndex];
    var frequency_type = selected_option.dataset.frequencyType;
    var frequency_num = selected_option.dataset.frequencyNum;

    if(frequency_type != frequency_types.invalid){

      var frequency_type_div = document.getElementsByClassName('frequency_type')[0];
      var frequency_num_div = document.getElementsByClassName('frequency_num')[0];

      frequency_type_div.value = frequency_type;
      frequency_num_div.value = frequency_num;

    }

  });

  frequency_dropdown.className += ' recurring_frequency';
  frequency_div.style.display = 'none';
  //recurring_label.parentNode.insertBefore(hover_modal, recurring_label.nextSibling);
  recurring_label.parentNode.insertBefore(frequency_dropdown, recurring_label.nextSibling);

}

window.onload = setup_recurring_frequency;