Выберите только вариант с именем класса

Question

По умолчанию выбраны все опции. Затем из события click, которое возвращает имя класса (zzz), я хочу показать только остальную часть параметра с class = 'zzz'

$(document).on('click', ".test" , function() {
      var selectedParent = $(this).val();
      alert(selectedParent); //returns zzz
      $('#users> option').each(function(){
         if ($(this).hasClass( "selectedParent" )){
             $(this).show();
         } else {
             $(this).hide();
      });
 });

<select multiple="true" id="users" name="users[]">
<option selected="selected" value="1" class="zzz">User 1</option>
<option selected="selected" value="2" class="zzz">User 2</option>
<option selected="selected" value="3" class="aaa">User 3</option>
<option selected="selected" value="4" class="aaa">User 4</option>
</select>

Answer 1

Мне нравится опция:

    $(document).on('click', "#users > option" , function() {
          var selectedParent = $(this).attr('class');
          $('#users>option').each(function(){
             if (!$(this).hasClass(selectedParent)){
                 $(this).hide();
             }
          });
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="users" name="users[]">
  <option selected="selected" value="1" class="zzz">User 1</option>
  <option selected="selected" value="2" class="zzz">User 2</option>
  <option selected="selected" value="3" class="aaa">User 3</option>
  <option selected="selected" value="4" class="aaa">User 4</option>
</select>

Надеюсь, это поможет.

Answer 2

Проблема в том, что вы указали selectedParent, поэтому он не использует значение переменной.

Кроме того, вместо использования .each() вы можете подставить класс в селекторы.

$(document).on('click', ".test", function() {
  var selectedParent = $(this).val();
  $(`#users > option.${selectedParent}`).show();
  $(`#users > option:not(.${selectedParent})`).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="users" name="users[]">
  <option selected="selected" value="1" class="zzz">User 1</option>
  <option selected="selected" value="2" class="zzz">User 2</option>
  <option selected="selected" value="3" class="aaa">User 3</option>
  <option selected="selected" value="4" class="aaa">User 4</option>
</select>
<br>
<button class="test" value="zzz">ZZZ</button>
<button class="test" value="aaa">AAA</button>