如何根据多选输入过滤 optgroup答案

【问题标题】：How to filter on optgroup based on multi selected input如何根据多选输入过滤 optgroup
【发布时间】：2020-10-07 01:15:56
【问题描述】：

假设我有 1 个集合选择输入和 1 个分组集合选择，如下所示：

Input 1:
<select 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>

Input 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>
<optgroup label="C# Developer">
   <option value="5">Candidate E</option>
   <option value="6">Candidate F</option>
</optgroup>

我想要实现的是，第一个输入将允许用户选择多个选项，并且根据选择的选项，第二个输入将被相应地过滤。

例如，假设用户在输入 1 中同时选择了“Java Developer”和“Ruby Developer”。那么输入 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 中仅选择一个选项，则上述代码有效，如果选择多个选项，则上述代码无效。感谢是否有人可以就如何处理这种多选选项情况提出建议。提前致谢。

【问题讨论】：

标签： jquery ruby-on-rails

【解决方案1】：

以下代码将根据input_1_id 的选定值自动显示/隐藏input_2_id 内的optgroup 元素

当input_1_id 的值发生变化时，它还会重置input_2_id 的value

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>

【讨论】：