联动下拉菜单筛选后除首个外选项无法保留的问题排查

核心原因 #

1. 表单默认提交触发页面刷新：如果筛选按钮是表单的submit类型按钮，点击后会触发表单提交导致页面刷新。此时只有国家下拉可能是后端渲染时就设置了选中值（比如PHP输出selected属性），而其他下拉是通过JS动态加载的，刷新后JS重新执行但没有读取之前的筛选参数，所以回到初始未选中状态。
2. 缺少筛选后状态恢复逻辑：不管是页面刷新还是AJAX筛选场景，都没有将用户之前选中的子下拉值重新赋值回去，导致选中状态丢失。

解决步骤 #

1. 阻止表单默认提交行为 #

如果筛选按钮在表单内，先阻止提交刷新页面，改用AJAX处理筛选逻辑：

// 绑定筛选按钮点击事件，阻止页面刷新
$('.filter-btn').on('click', function(e) {
  e.preventDefault(); // 关键：阻止默认提交行为

  // 收集所有下拉的选中值
  const filterParams = {
    country: $('.countryChange').val(),
    reps: $('.repsChange').val(),
    distributor: $('.distributorChange').val(),
    product: $('.productChange').val()
  };

  // 发送AJAX请求获取筛选结果
  $.get('../path/to/your-filter-script.php', filterParams, function(response) {
    // 更新页面展示的筛选数据
    $('.result-area').html(response);
  });
});

// 或者直接绑定表单的submit事件
$('form').on('submit', function(e) {
  e.preventDefault();
  // 执行筛选逻辑
});

2. 页面加载时恢复下拉选中状态 #

如果必须通过页面刷新展示筛选结果，需要在页面加载时从URL参数中读取之前的筛选值，依次恢复各下拉的选中状态：

$(document).ready(function() {
  // 获取URL中的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const savedCountry = urlParams.get('country');
  const savedReps = urlParams.get('reps');
  const savedDistributor = urlParams.get('distributor');
  const savedProduct = urlParams.get('product');

  // 恢复国家下拉并加载后续菜单
  if (savedCountry) {
    $('.countryChange').val(savedCountry);
    loadReps(savedCountry, savedReps);
  }

  // 封装加载销售代表下拉的函数
  function loadReps(countryCode, selectedValue) {
    const url = `../Communs/repsCountry.php?country=${countryCode}`;
    $.getJSON(url, function(data) {
      const $repsDropdown = $('select.repsChange');
      $repsDropdown.empty();
      
      $.each(data, function(key, name) {
        $repsDropdown.append(`<option value="${key}">${name}</option>`);
      });

      // 恢复选中状态
      if (selectedValue) {
        $repsDropdown.val(selectedValue);
        loadDistributors(selectedValue, savedDistributor);
      }
    });
  }

  // 封装加载经销商下拉的函数
  function loadDistributors(repsCode, selectedValue) {
    const url = `../Communs/distributorReps.php?reps=${repsCode}`;
    $.getJSON(url, function(data) {
      const $distDropdown = $('select.distributorChange');
      $distDropdown.empty();
      
      $.each(data, function(key, name) {
        $distDropdown.append(`<option value="${key}">${name}</option>`);
      });

      if (selectedValue) {
        $distDropdown.val(selectedValue);
        loadProducts(selectedValue, savedProduct);
      }
    });
  }

  // 封装加载产品下拉的函数
  function loadProducts(distCode, selectedValue) {
    const url = `../Communs/productsDistributor.php?distributor=${distCode}`;
    $.getJSON(url, function(data) {
      const $prodDropdown = $('select.productChange');
      $prodDropdown.empty();
      
      $.each(data, function(key, name) {
        $prodDropdown.append(`<option value="${key}">${name}</option>`);
      });

      if (selectedValue) {
        $prodDropdown.val(selectedValue);
      }
    });
  }
});

3. 优化联动逻辑（可选） #

把原本分散在change事件里的加载代码改成可复用函数，既方便联动调用，也方便页面加载时恢复状态，减少重复代码：

// 重新绑定国家下拉的change事件
$('.countryChange').on('change', function() {
  loadReps($(this).val(), null);
});

// 销售代表下拉的change事件
$('.repsChange').on('change', function() {
  loadDistributors($(this).val(), null);
});

// 经销商下拉的change事件
$('.distributorChange').on('change', function() {
  loadProducts($(this).val(), null);
});

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