如何隐藏第二个下拉框中与第一个下拉框选中文本相同的选项？

我来帮你搞定主供应商选择后联动隐藏次要供应商相同文本选项的需求，先梳理下原代码里的问题，再给你调整后的可运行版本：

原代码的核心问题 #

• 错误获取了selectedValue（用$(this).text()完全没必要，而且你也没用到这个变量）
• 无效的optionValues.toString()调用（这个方法不会修改原数组，也没用到返回值，纯属冗余）
• 错误的选择器$("#secondary_supplier option[selectedText]")，根本没法正确匹配到文本对应的选项
• 错误假设次要供应商的value等于文本，但你明确说选项值各不相同，所以不能用value来匹配文本
• 没处理重新选择时的选项恢复逻辑，之前隐藏的选项不会自动显示

修正后的代码 #

$("#primary_supplier").change(function () {
    // 获取当前选中的主供应商文本，加trim避免空格干扰匹配
    const selectedPrimaryText = $(this).find("option:selected").text().trim();
    
    // 每次选择前先把次要供应商的所有选项恢复显示
    $("#secondary_supplier option").css("display", "block");
    
    // 精准筛选出与主供应商文本相同的次要供应商选项并隐藏
    $("#secondary_supplier option").filter(function() {
        return $(this).text().trim() === selectedPrimaryText;
    }).css("display", "none");
});

额外优化建议 #

如果希望页面刚加载时就自动执行一次隐藏逻辑（比如主供应商默认有选中值的情况），可以在代码末尾加一行触发事件的代码：

// 页面初始化时自动执行一次，确保默认状态也符合要求
$("#primary_supplier").trigger("change");

内容的提问来源于stack exchange，提问作者venkata prasad