如何合并jQuery函数实现单选择框联动过滤多选择框并解决重复过滤问题

你遇到的问题根源在于两个函数共用了同一个data('options')键来存储原始选项，合并后第二次赋值会直接覆盖第一次的存储内容，导致后续切换公司时，过滤的不是最初的完整选项列表，而是被覆盖后的错误集合。

给Vendor和Type的原始选项分别设置独立的Data存储键，避免冲突，然后在同一个change事件里分别处理两个下拉框的过滤逻辑：

jQuery("#companySel").change(function() {
    var $companySel = jQuery(this);
    var companyId = $companySel.val();

    // 处理Vendor下拉框的过滤逻辑
    if (!$companySel.data('vendorOriginalOptions')) {
        // 首次触发时保存Vendor的全部原始选项
        $companySel.data('vendorOriginalOptions', jQuery('#vendorId option').clone());
    }
    var vendorOptions = companyId === '' 
        ? '' 
        : $companySel.data('vendorOriginalOptions').filter('[companyId=' + companyId + ']');
    jQuery('#vendorId').html(vendorOptions);

    // 处理Type下拉框的过滤逻辑
    if (!$companySel.data('typeOriginalOptions')) {
        // 首次触发时保存Type的全部原始选项
        $companySel.data('typeOriginalOptions', jQuery('#typeId option').clone());
    }
    var typeOptions = companyId === '' 
        ? '' 
        : $companySel.data('typeOriginalOptions').filter('[companyId=' + companyId + ']');
    jQuery('#typeId').html(typeOptions);
});

关键改动说明 #

• 用vendorOriginalOptions和typeOriginalOptions两个独立的Data键，分别存储Vendor和Type的原始选项，互相不干扰。
• 每次切换公司时，都从各自的原始选项集合中过滤，确保始终基于最完整的初始列表处理。
• 缓存jQuery(this)为$companySel，减少重复DOM查询，提升代码性能。

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