# Product Matrix Dropdown Improvement

**URL:** <https://forum.modmore.com/t/product-matrix-dropdown-improvement/1828>\
**Category:** Commerce\
**Created:** [May 22, 2019, 8:13am UTC](https://forum.modmore.com/t/product-matrix-dropdown-improvement/1828 "2019-05-22T08:13:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jako](https://forum.modmore.com/user_avatar/forum.modmore.com/jako/32/504_2.png) [@jako](https://forum.modmore.com/u/jako)\
**Post date:** [May 22, 2019, 8:13am UTC](https://forum.modmore.com/t/product-matrix-dropdown-improvement/1828/1 "2019-05-22T08:13:22Z")

</div>

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/](http://jsfiddle.net/treehillstudio/xc4L1zmd/)