Product Matrix Dropdown Improvement

I like to share a small javascript that improves the product matrix dropdown a lot.

It transforms the optgroup/option select into two dependent selects.

The script code is quite simple:

$('select.dependent').each(function(i, sel) {
  var original = $(this).clone(),
    dependent = $('<select>').attr({
      class: 'form-control',
      id: + '_dependent'
    for: + '_dependent'
  }).text($(this).data('rowlabel')).insertAfter(this); = + '_group';
  $('optgroup', this).replaceWith(function() {
    return $('<option>').text(this.label)
  $('option:first', this).prop('selected', true);
  $(this).on('change', function() {
    dependent.html(original.children('[label="' + $(this).val() + '"]').html())

The select needs a dependent class and a data-rowlabel attribute.

It could be tested on: