фильтр optgroup select, чтобы иметь уникальные параметры выбора без дубликатов

Question

У меня есть форма динамического выбора, использующая grouped_collection_select и JS. Это работает, но отображает ВСЕ связанные записи. Я бы хотел, чтобы отображались только уникальные значения.

Вот просмотр ... при выборе стиля он затем отфильтрует все доступные цвета:

<%= f.grouped_collection_select :item_id, Style.all.order(:title), :items, :title, :id, :title %>
<%= f.grouped_collection_select :color_id, Item.all.order(:title), :colors, :title, :id, :title %>

html:

Styles:
<option value="1">...
<option value="2">...
#Assume option 1 was selected
Colors:
<option value="1">...
<option value="1">...
<option value="2">...
<option value="2">...

Поскольку существует несколько записей стилей в одних и тех же цветах, отображаются все эти ассоциации.

Например, скажем, есть футболки с размерами от маленького до 5XL, всего 8 переменных размера, доступных в черном цвете. Поле выбора цвета покажет 8 "Черный" для выбора. Я бы хотел, чтобы у него было только 1 черное.

Javascript:

jQuery(function() {
  var colors;
  colors = $('#shop_product_color_id').html();
  console.log(colors);
  return $('#shop_product_item_id').change(function() {
    var item, escaped_item, options;
    item = $('#shop_product_item_id :selected').text();
    escaped_item = item.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(colors).filter("optgroup[label=" + item + "]").html();
    console.log(options);
    if (options) {
      $('#shop_product_color_id').html(options);
      return $('#shop_product_color_id').parent().show();
    } else {
      // $('#shop_product_color_id').empty();
      return $('#shop_product_color_id').empty();
    }
  });
});

jQuery(function() {
  var sizes;
  sizes = $('#shop_product_size_id').html();
  console.log(sizes);
  return $('#shop_product_item_id').change(function() {
    var item, escaped_item, options;
    item = $('#shop_product_item_id :selected').text();
    escaped_item = item.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(sizes).filter("optgroup[label=" + item + "]").html();
    console.log(options);
    if (options) {
      $('#shop_product_size_id').html(options);
      return $('#shop_product_size_id').parent().show();
    } else {
      return $('#shop_product_size_id').empty();
    }
  });
});

Как я могу вернуть только уникальные опции без дубликатов?