Product Matrix Dropdown Improvement

Commerce
#1

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({
      name: this.name,
      class: 'form-control',
      id: this.name + '_dependent'
    }).insertAfter(this);
  $('<label>').attr({
    for: this.name + '_dependent'
  }).text($(this).data('rowlabel')).insertAfter(this);
  this.name = this.name + '_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())
  }).change();
});

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

It could be tested on: http://jsfiddle.net/treehillstudio/xc4L1zmd/

Product Options setup