Как фильтровать по optgroup на основе множественного выбора ввода

Question

Допустим, у меня есть 1 вход для выбора коллекции и 1 сгруппированный выбор для коллекции следующим образом: выбранные параметры, 2-й вход будет отфильтрован соответствующим образом.

Например, предположим, что пользователь выбрал как «Java Разработчик», так и «Ruby Разработчик» на входе 1. Затем должен отображаться вход 2 только

<optgroup label="Java Developer">
   <option value="1">Candidate A</option>
   <option value="2">Candidate B</option>
</optgroup>
<optgroup label="Ruby Developer">
  <option value="3">Candidate C</option>
  <option value="4">Candidate D</option>
</optgroup>

Это упрощенный код JQuery, который я написал до сих пор:

  $(document).on("turbolinks:load", function () {

    input2_html = $('#input_2_id').html()
    $('#input_1_id').on('change', function(e){
        input1_text = $('#input_1_id :selected').text();
        options = $(input2_html).filter("optgroup[label='" + input1_text + "']").html();
        $('#input2_id').html(options).show();
    });
  })

Приведенный выше код работает, если я выберу только один вариант из входа 1 и не будет работать, если выбрано несколько вариантов. Благодарю, если кто-нибудь может посоветовать, как справиться с этим случаем с несколькими вариантами выбора. Заранее спасибо.

Answer 1

Следующий код автоматически покажет / скроет элементы optgroup внутри input_2_id в зависимости от выбранного значения (значений) input_1_id

Он также сбрасывает value из input_2_id, когда значение input_1_id изменяется

var $input1 = $('#input_1_id'),
  $input2 = $('#input_2_id'),

  $input2optgroups = $input2
  .find('optgroup');

$input1.change(function() {
    $input2optgroups
      .hide();

    $(this)
      .val()
      .map(function(id) {
        return $input1
          .find('option[value=' + id + ']')
          .text();
      })
      .forEach(function(text) {
        $input2optgroups
          .filter('[label="' + text + '"]')
          .show();
      });

    $input2
      .val(0);
  })
  .change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select multiple name="some_name_1" id="input_1_id">
  <option value="1">Java Developer</option>
  <option value="2">Ruby Developer</option>
  <option value="3">C# Developer</option>
</select>

<select name="some_name_2" id="input_2_id">
  <option value="0">Select..</option>
  <optgroup label="Java Developer">
    <option value="1">Candidate A</option>
    <option value="2">Candidate B</option>
  </optgroup>
  <optgroup label="Ruby Developer">
    <option value="3">Candidate C</option>
    <option value="4">Candidate D</option>
  </optgroup>
  <optgroup label="C# Developer">
    <option value="5">Candidate E</option>
    <option value="6">Candidate F</option>
  </optgroup>
</select>