检查多个选择的选项，如果找到值显示 Div

Question

我在 select 中有一个组，如果选择它会显示 Div。

效果很好，问题是我还有其他几个 select 具有相同的选项和组。

并且如果您选择显示 div 的组，然后您选择一个不会再次隐藏的组。

选择是动态创建的，因此您可以创建或删除行，如果您删除了创建 select 的行并选择了显示 div 的组的选项，那么您将看到 div 即使没有 select 选项显示 div.

是否要检查 select 显示或不显示 div 的选项？我想显示 div 如果组“唯一”选项中至少有一个是 selected。如果它检查并且没有该组的选项，则隐藏。

 function doSomething(element) {
  // get optgroup
  let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
  console.log(optgroup)
  if (optgroup == 'Unique') {
    $("#extras").show()
  } else {
    $("#extras").hide()
  }
}

.extras {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-floating mb-3 mt-3">
  <table>
    <tr>
      <td><input class="form-control input-lg email" type="email" name="mail[]" required />
      </td>
      <td>
        <select class="form-select" name="skills[]" onchange='doSomething(this)' required>
          <option class="blank" value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup class="unique" label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
      </td>
      <td>
    </tr>
    <tr>
      <td><input class="form-control input-lg email" type="email" name="mail[]" required />
      </td>
      <td>
        <select class="form-select" name="skills[]" onchange='doSomething(this)' required>
          <option class="blank" value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup class="unique" label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
      </td>
      <td>
    </tr>
    <tr>
      <td><input class="form-control input-lg email" type="email" name="mail[]" required />
      </td>
      <td>
        <select class="form-select" name="skills[]" onchange='doSomething(this)' required>
          <option class="blank" value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup class="unique" label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
      </td>
      <td>
    </tr>
  </table>
</div>

<div class="mt-5 extras extras" id="extras">
  <h4 class="text-dark">Check</h4>
  Increased through making items, sewing and cooking.<br>
  <input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>

Answer 1

如果您将其设置为事件委托，那么管理和整合您的代码会更加容易。设置一个监听器以对 select 菜单做出反应 - 我已经在 table 上设置了它，这样你就可以在 table 中创建新的 select 菜单，它们会继承监听器。

然后，只需检查所有 select 以查看它们是否使用目标 optgroup 来打开或关闭 div。

一些其他注意事项：

我给了你的 select 菜单可识别的类以便更容易 select 与 jQuery
你的所有代码都是我做的jQuery，之前是一半一半。
您可以使用 toggle() 而不是 show/hide，并且只需为参数提供一个布尔值。 true 表示 show()，flase 表示 hide()
我设置了一个删除按钮来展示它如何与这个流程集成

$('.skillTable').on('change', ".skillSelect", function() {
  checkExtras()
})

$('.delete').click(function() {
  $(this).closest('tr').remove();
  checkExtras();
})

function checkExtras() {
  let hasExtras = false;
  $(".skillSelect").each(function(i, o) {
    let optgroup = $(o).find(':checked').closest('optgroup').attr('label');
    if (optgroup === 'Unique') hasExtras = true;
  })
  $("#extras").toggle(hasExtras)
}

.extras {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-floating mb-3 mt-3">
  <table class='skillTable'>
    <tr>
      <td><input class="form-control input-lg email" type="email" name="mail[]" required />
      </td>
      <td>
        <select class="form-select skillSelect" name="skills[]" required>
          <option class="blank" value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup class="unique" label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select> <button class='delete'>delete</button>
      </td>
      <td>
    </tr>
    <tr>
      <td><input class="form-control input-lg email" type="email" name="mail[]" required />
      </td>
      <td>
        <select class="form-select skillSelect" name="skills[]" required>
          <option class="blank" value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup class="unique" label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select> <button class='delete'>delete</button>

      </td>
      <td>
    </tr>
    <tr>
      <td><input class="form-control input-lg email" type="email" name="mail[]" required />
      </td>
      <td>
        <select class="form-select skillSelect" name="skills[]" required>
          <option class="blank" value=""></option>
          <optgroup Class="unique" label="Common">
            <option value="Extraction">Extraction</option>
            <option value="Hunting">Hunting</option>
            <option value="Farming">Farming</option>
          </optgroup>
          <optgroup class="unique" label="Unique">
            <option value="Diplomacy">Diplomacy</option>
            <option value="Survival">Survival</option>
          </optgroup>
        </select>
        <button class='delete'>delete</button>
      </td>
      <td>
    </tr>
  </table>
</div>

<div class="mt-5 extras extras" id="extras">
  <h4 class="text-dark">Check</h4>
  Increased through making items, sewing and cooking.<br>
  <input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>

检查多个选择的选项，如果找到值显示 Div

Check multiple selected options, if found value show Div

html

javascript

jquery

show-hide