Параметры раскрывающегося списка для отображения только одного варианта из того же класса

Question

У меня проблема. Показать только 1 из того же класса. Мои коды раскрывающегося списка следующие:

<select id="AgeSelect" class="nf" name="ages">
<option value="">Filter By Age Group</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="14 Years and Under" class="14YearsandUnder">14 Years and Under</option>
<option value="14 Years and Under" class="14YearsandUnder">14 Years and Under</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
<option value="12 Years and Under" class="12YearsandUnder">12 Years and Under</option>
<option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
<option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
<option value="12 Years and Under" class="12YearsandUnder">12 Years and Under</option>
<option value="12 Years and Under" class="12YearsandUnder">12 Years and Under</option>
<option value="8 Years and Under" class="8YearsandUnder">8 Years and Under</option>
<option value="8 Years and Under" class="8YearsandUnder">8 Years and Under</option>
<option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
<option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
<option value="Open Age" class="OpenAge">Open Age</option>
<option value="Open Age" class="OpenAge">Open Age</option>
<option value="Open Age" class="OpenAge">Open Age</option>
<option value="Special Needs" class="SpecialNeeds">Special Needs</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
<option value="Open Age" class="OpenAge">Open Age</option>
<option value="Open Age" class="OpenAge">Open Age</option>
<option value="Special Needs" class="SpecialNeeds">Special Needs</option>
</select>

Вы можете увидеть все классы в параметрах.

например class="10YearsandUnder", class="14YearsandUnder". Я пробовал CSS First Selector, но мне это не удалось.

Пожалуйста, помогите мне это сделать.

Мне нужно только показать один из тех же классов.

Answer 1

Добавьте приведенный ниже код в свой тег <script>.

$(document).ready(function() {
    const distinctClasses = new Set();

    $('#AgeSelect').find('option').each(function(){
        if(this.className != "") {
            distinctClasses.add(this.className);
        }
    });

    distinctClasses.forEach(cls => {
        $(`option.${cls}`).slice(1).hide();
    });
});

Убедитесь, что вы не используете функции жирной стрелки, где используется this, поскольку это может изменить значение this.

Answer 2

Это можно сделать, перебрав все параметры и поддерживая карту class имен. Если class отсутствует на карте, добавьте его, иначе скройте опцию.

var classList = {};
var options = document.querySelectorAll('#AgeSelect option');
options.forEach(function(option) {
  if (option.className) {
    classList[option.className] ? option.style.display = 'none' : classList[option.className] = "done"
  }
})

<select id="AgeSelect" class="nf" name="ages">
  <option value="">Filter By Age Group</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="14 Years and Under" class="14YearsandUnder">14 Years and Under</option>
  <option value="14 Years and Under" class="14YearsandUnder">14 Years and Under</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
  <option value="12 Years and Under" class="12YearsandUnder">12 Years and Under</option>
  <option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
  <option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
  <option value="12 Years and Under" class="12YearsandUnder">12 Years and Under</option>
  <option value="12 Years and Under" class="12YearsandUnder">12 Years and Under</option>
  <option value="8 Years and Under" class="8YearsandUnder">8 Years and Under</option>
  <option value="8 Years and Under" class="8YearsandUnder">8 Years and Under</option>
  <option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
  <option value="10 Years and Under" class="10YearsandUnder">10 Years and Under</option>
  <option value="Open Age" class="OpenAge">Open Age</option>
  <option value="Open Age" class="OpenAge">Open Age</option>
  <option value="Open Age" class="OpenAge">Open Age</option>
  <option value="Special Needs" class="SpecialNeeds">Special Needs</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="10 Years &amp; Under" class="10YearsandUnder">10 Years &amp; Under</option>
  <option value="Open Age" class="OpenAge">Open Age</option>
  <option value="Open Age" class="OpenAge">Open Age</option>
  <option value="Special Needs" class="SpecialNeeds">Special Needs</option>
</select>