JavaScript: Quick method to find <option> element by its value attribute in <select>?

[Isaac_Cosmos]

I’m working with a dropdown menu that contains several thousand option elements. My task is to locate specific options based on their value attributes using JavaScript. The tricky part is that I need to perform this search operation multiple times within a loop (around 200-300 iterations).

Currently, my approach involves iterating through the entire options collection to find the target element. However, this method is extremely slow and causes the browser to freeze completely. On my high-performance computer, the page becomes unresponsive and I have to force-close it.

function findOptionByValue(selectElement, targetValue) {
    for (let i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].value === targetValue) {
            return selectElement.options[i];
        }
    }
    return null;
}

let dropdown = document.getElementById('myDropdown');
for (let j = 0; j < searchValues.length; j++) {
    let foundOption = findOptionByValue(dropdown, searchValues[j]);
    // process the found option
}

Does anyone know a more efficient technique for this? I’m open to browser-specific solutions, though cross-browser compatibility would be ideal.

[sarahj]

You’re creating a performance nightmare with those nested loops. I hit the same issue with large product catalogs - caching fixed it. Build a Map object once when the page loads, then use it for lookups.

function createOptionMap(selectElement) {
    const map = new Map();
    for (let i = 0; i < selectElement.options.length; i++) {
        map.set(selectElement.options[i].value, selectElement.options[i]);
    }
    return map;
}

const optionMap = createOptionMap(document.getElementById('myDropdown'));

for (let j = 0; j < searchValues.length; j++) {
    let foundOption = optionMap.get(searchValues[j]);
    // process the found option
}

This drops your lookup from O(n) to O(1) per search. With thousands of options and hundreds of searches, you’ll see massive performance gains. Creating the initial map takes some time but it’s nothing compared to what you’re doing now.

[Mike71]

Honestly, if you’re dealing with thousands of options, maybe reconsider the UI design? A dropdown with that many items is terrible UX anyway. But for a quick fix, try document.querySelector('#myDropdown option[value="' + targetValue + '"]') - it’s faster than looping but still not great for 200+ searches.

[Ethan99]

I’ve hit this same issue with large dropdowns. querySelector is way faster here since it uses the browser’s built-in optimizations instead of you manually looping through everything.

function findOptionByValue(selectElement, targetValue) {
    return selectElement.querySelector(`option[value="${targetValue}"]`);
}

let dropdown = document.getElementById('myDropdown');
for (let j = 0; j < searchValues.length; j++) {
    let foundOption = findOptionByValue(dropdown, searchValues[j]);
    // process the found option
}

This beats manual loops because querySelector taps into native browser optimizations. Just watch out for value escaping if your values have special characters or quotes - you might need to escape them or use different quote styles. You’ll see the performance boost even without caching, but combining this with a Map cache would be even better.