0

I have two selects2: #one and #two.

one:

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

two:

<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>

#

When I change selected item in #one I'd like to set all option groups in #two, which is not equal to #one:selected - to 'hidden'. It works on simple selects, but because I use a select2 plugin I face a problem (items don't hide, because select2 generates his own items on change the .select).

#

This is my code:

$(".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');
                }
            });
        });

I want to see only 'Currency' optgroup in #two when I select 'Currency' in #one.

peak
  • 105,803
  • 17
  • 152
  • 177
  • 1
    https://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery – Viplock Jul 27 '17 at 07:42
  • Possible duplicate of [How to populate a cascading Dropdown with JQuery](https://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery) – cнŝdk Jul 27 '17 at 07:43

0 Answers0