Dropdown Options to show only one from same class of option

user_13498022 0
Viewed 68

I am having an issue. To show only 1 from the same class. My Dropdown Codes are as following.

<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>

You can see all the classes in Options.

like class="10YearsandUnder" , class="14YearsandUnder". I have tried CSS First Selector but I am failed.

Kindly help me to make this done.

What I need is, Only to show one from same classes.

jquery
2 Answers

Add the below code to your <script> tag.

$(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();
    });
});

Make sure to don't use fat arrow functions where this is used as it might change the value of this.

user_63527720

This can be done by looping over all the options and maintaining a map of class names. If the class is not present on the map then add it, else hide the option.

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>

user_73533190
Related