JSFiddle - React, Tailwind, and code Playground

by 7_Paul_21

HTML

<div>
  <input name='search' class='search' placeholder='Поиск' disabled/>
</div>

<!-- ПЕРВЫЙ СЕЛЕКТ -->
<select name='groups'>
  <option data-id='1' value='группа 1'>группа 1</option>
  <option data-id='2' value='группа 2'>группа 2</option>
  <option data-id='3' value='группа 3'>группа 3</option>
  <option data-id='4' value='группа 4'>группа 4</option>
  <option data-id='5' value='группа 5'>группа 5</option>
</select>

<!-- ВТОРОЙ СЕЛЕКТ -->
<select name='people' disabled>
  <option value='0'>Выберите группу</option>
  <option data-group='1' value='номер 1'>номер 1</option>
  <option data-group='1' value='номер 1'>номер 1</option>
  <option data-group='1' value='номер 1'>номер 1</option>
  <option data-group='2' value='номер 2'>номер 2</option>
  <option data-group='2' value='номер 2'>номер 2</option>
  <option data-group='2' value='номер 2'>номер 2</option>
  <option data-group='2' value='номер 2'>номер 2</option>
  <option data-group='3' value='номер 3'>номер 3</option>
  <option data-group='3' value='номер 3'>гомен 3</option>
  <option data-group='3' value='номер 3'>аргвал 3</option>
  <option data-group='4' value='номер 4'>номер 4</option>
  <option data-group='5' value='номер 5'>номер 5</option>
  <option data-group='4' value='номер 4'>номер 4</option>
  <option data-group='5' value='номер 5'>номер 5</option>
  <option data-group='4' value='номер 4'>номер 4</option>
  <option data-group='5' value='номер 5'>номер 5</option>
</select>

CSS

select[name=people] option {
  display: none;
}

.search {
  margin-left: 70px;
}

JavaScript

$(document).ready(function() {
  var idGroup;
  $('select[name="groups"]').on('change', function() {
    $('select[name="people"] option').css({
      'display': 'none'
    }); //скрываем все пункты
    idGroup = $('option:selected', this).attr('data-id'); //получаем id значение выбранного option из ПЕРВОГО СЕЛЕКТА

    $('select[name="people"] option[data-group="' + idGroup + '"]').css({
      'display': 'block'
    }); // показываем только те, у которых data-group совпадает с id выбранным раннее
    $('select[name="people"]').prop('disabled', false);
    $('.search').prop('disabled', false);
    $('select[name="people"] option[value="0"]').css({
      'display': 'block'
    }).prop('selected', true);
  });
  $('.search').on('keyup', function() {
    word = $(this).val();
    $('select[name="people"]').trigger('open');
    $('select[name="people"] option').css({
      'display': 'none'
    }); //скрываем все пункты
    $('select[name="people"] option[data-group="'+idGroup+'"]:contains("' + word + '")').css({
      'display': 'block'
    }); //скрываем все пункты
    //  $('select[name="people"] option=[value="'+word+'"]')

  });
});