如何使一个选择依赖于另一个选择？

Question

我有两个select2：#one和#two。

一：

<select id="one">
<option value="127">Currency</option>
<option value="133">Banks</option>
<option value="134">Credits</option>
<option value="142">Pokemons</option>
</select>

二：

<select id="two">
<optgroup label="Currency">
<option value="127">KZT</option>
<option value="133">USD</option>
<option value="134">EUR</option>
<option value="142">RUB</option>
</optgroup>
<optgroup label="Games">
<option value="11">CS:GO</option>
<option value="2233">BDSM</option>
<option value="33">Work</option>
<option value="222">WOW</option>
</optgroup>
</select>

＃

当我在#one中更改所选项目时，我想将#two中不等于#one：selected的所有选项组设置为“隐藏”。 它适用于简单的选择，但是因为我使用了select2插件，所以我遇到了一个问题（项目不会隐藏，因为select2在更改.select时会生成自己的项目）。

＃

这是我的代码：

$(".select2").on('change', function () {
            var target = $("#two");
            var currentSelected = $(this).find(':selected').text();
            var targetOptGroups = target.find('optgroup');
            $.each(targetOptGroups, function (i, value) {
                if(value.label != currentSelected){
                    $(value).addClass('hidden');
                }
                else{
                    $(value).removeClass('hidden');
                }
            });
        });

当我在#one中选择'Currency'时，我只想在#two中看到'Currency'optgroup。