Как найти родительскую optgroup для выбранного варианта

Question

У меня есть следующее поле выбора (множественный выбор) в HTML.

<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
    title="Selected All..." name="dhsSelect">
    <optgroup data-max-options="1" id="top">
        <option value="T5">Top 5</option>
        <option value="T10">Top 10</option>
        <option value="T20">Top 20</option>
    </optgroup>
    <optgroup id="filter">
        <option value="1">&lt; 10</option>
        <option value="2">10 - 20</option>
        <option value="3">&ge; 20</option>
    </optgroup>
</select>

И следующий файл JS

$("#dhsSelect").change(function() {
    // if any item in the top optgroup (id='top') is being selected, do something
    // if any item in the second optgroup (id='bottom') is bring selected, do something
});

Я пытаюсь работать при условии if,Любая помощь будет оценена.

Answer 1

Вы имеете в виду что-то вроде этого?

Измените map на forEach, вернитесь к своей функции и удалите журнал консоли - я просто даю вам инструменты, отсутствие деталей в вашем вопросе приводит котсутствие подробностей в моем ответе

$("#dhsSelect").on("change", function() {
  console.log(
    $("option", this).map(function() {
      if (this.selected) return this.value + " " + this.closest("optgroup").id
    }).get()
  )
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count" title="Selected All..." name="dhsSelect">
  <optgroup data-max-options="1" id="top">
    <option value="T5">Top 5</option>
    <option value="T10">Top 10</option>
    <option value="T20">Top 20</option>
  </optgroup>
  <optgroup id="filter">
    <option value="1">&lt; 10</option>
    <option value="2">10 - 20</option>
    <option value="3">&ge; 20</option>
  </optgroup>
</select>