通过select2 js选择一项时如何消失相同类别的项？

Question

当我选择一个类别时，相同类别的其余项目将在下拉菜单中消失。

这是我的HTML代码：

    <div class='admin_product_icons'>
    <label for="product_transparency_icon_ids">Transparency Icons</label>
    <input name='product[transparency_icon_ids][]' type='hidden' value=''>
    <select id='transparency_icon_ids' multiple='multiple' name='product[transparency_icon_ids][]'>
      <option data-transparency-category='Country' value='11'>
        Country
        -&gt;
        Bangladesh
      </option>
      <option data-transparency-category='Country' value='12'>
        Country
        -&gt;
        England
      </option>
      <option data-transparency-category='Material' value='13'>
        Material
        -&gt;
        Cotton
      </option>
      <option data-transparency-category='Material' value='14'>
        Material
        -&gt;
        silk
      </option>
    </select>
  </div>

我的自定义js：

  $(document).ready(function() {
  $('select#transparency_icon_ids').select2({
    placeholder: 'Add a transparency Icon',
    allowClear: true,
  });
});

因此，当我选择一个国家项目时，其他国家项目将消失。物料类别项目相同。

如何通过javascript进行选择？