Dropdown Options只显示同一类选项中的一个

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第一选择器，但失败了。

请帮我完成这件事。

我需要的是，只展示同一个班级的一个。

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>