如何用jQuery检查两个select下拉框重复选项并删除

First, let’s figure out why your current code isn’t working:
Your code compares each option in select-box2 to only the first option in select-box1 (since $('#select-box1 option').val() returns the value of the first matching element). That’s why it fails to detect duplicates across all options in the first select box.

Here’s the corrected approach to remove any duplicates from select-box1 that exist in select-box2:

// Run this after your select boxes are populated from the database
$(document).ready(function() {
    // Step 1: Collect all values from select-box2 into a Set for fast lookup
    const box2Values = new Set();
    $('#select-box2 option').each(function() {
        box2Values.add(this.value);
    });

    // Step 2: Iterate through select-box1 options and remove duplicates
    $('#select-box1 option').each(function() {
        if (box2Values.has(this.value)) {
            $(this).remove(); // Delete the duplicate option from box1
        }
    });
});

Breakdown of the solution: #

• Fast Lookup with Set: Using a Set makes checking if a value exists much quicker (especially for long option lists) because Set.has() is an O(1) operation, unlike array indexOf() which is O(n).
• Full Option Scan: We loop through every option in select-box1 and check if its value is present in the box2Values set. If it is, we remove that option immediately.
• Timing Note: Make sure this code runs after your database-population logic finishes. If you’re loading options via AJAX, place this code inside the AJAX success callback instead of document.ready.

Alternative (Older Browser Compatibility): #

If you need to support older browsers that don’t have Set, use an array instead:

$(document).ready(function() {
    const box2Values = [];
    $('#select-box2 option').each(function() {
        box2Values.push(this.value);
    });

    $('#select-box1 option').each(function() {
        if (box2Values.indexOf(this.value) !== -1) {
            $(this).remove();
        }
    });
});

Edge Cases to Keep in Mind: #

• If you need to compare option display text instead of values, replace this.value with $(this).text().
• If your select boxes update dynamically (e.g., after user actions), re-run this duplicate-check code each time the options change.

内容的提问来源于stack exchange，提问作者M.Gooda