When working with <select> dropdowns in HTML, it’s common to encounter scenarios where you need to remove duplicate options or sort them alphabetically.
Removing Duplicate <option> Elements
Duplicate options in a dropdown can confuse users and lead to a poor user experience. To remove duplicates using vanilla JavaScript, we can iterate through the <option> elements, track the values we’ve encountered, and remove any duplicates.
/**
* Removes duplicate <option> elements from a <select> dropdown.
* @param {HTMLSelectElement} selectElement - The <select> element to process.
*/
function removeSelectDuplicates(selectElement) {
const options = selectElement.querySelectorAll('option');
const seen = new Set();
options.forEach(option => {
if (seen.has(option.value)) {
option.remove();
} else {
seen.add(option.value);
}
});
}Usage Example:
<select id="myDropdown">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="cherry">Cherry</option>
</select>
<script>
const selectElement = document.getElementById('myDropdown');
removeSelectDuplicates(selectElement);
</script>In this example, the second “Apple” option will be removed, leaving only unique options in the dropdown.
Sorting <option> Elements Alphabetically
Sorting the options alphabetically can enhance the usability of your dropdowns, especially when dealing with long lists. Here’s how you can sort <option> elements alphabetically using vanilla JavaScript:
/**
* Sorts <option> elements of a <select> dropdown alphabetically.
* @param {HTMLSelectElement} selectElement - The <select> element to sort.
*/
function sortSelectOptions(selectElement) {
const options = Array.from(selectElement.querySelectorAll('option'));
options.sort((a, b) => a.text.localeCompare(b.text));
// Clear existing options and append sorted ones
selectElement.innerHTML = '';
options.forEach(option => selectElement.appendChild(option));
}Usage Example:
<select id="fruitDropdown">
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="cherry">Cherry</option>
</select>
<script>
const selectElement = document.getElementById('fruitDropdown');
sortSelectOptions(selectElement);
</script>After executing this script, the options in the dropdown will be sorted alphabetically: Apple, Banana, Cherry.
Combining Both Functions
You can combine both functionalities into a single function that first removes duplicates and then sorts the options alphabetically:
/**
* Removes duplicate <option> elements and sorts remaining options alphabetically.
* @param {HTMLSelectElement} selectElement - The <select> element to process.
*/
function cleanAndSortSelect(selectElement) {
removeSelectDuplicates(selectElement);
sortSelectOptions(selectElement);
}Usage Example:
<select id="productDropdown">
<option value="laptop">Laptop</option>
<option value="tablet">Tablet</option>
<option value="phone">Phone</option>
<option value="laptop">Laptop</option>
</select>
<script>
const selectElement = document.getElementById('productDropdown');
cleanAndSortSelect(selectElement);
</script>In this example, the duplicate “Laptop” option will be removed, and the remaining options will be sorted alphabetically.
