如何筛选用户所选选项并返回对应网络方案建议？

1. 获取用户选中的表单数据 #

首先从下拉选择框中收集用户的所有选择，最简便的方式是利用FormData对象直接提取表单数据：

// 假设表单的id是network-selection-form
const form = document.getElementById('network-selection-form');
const formData = new FormData(form);

// 将FormData转为普通对象，方便后续对比
const userSelections = Object.fromEntries(formData.entries());

如果需要单独处理某个下拉框，也可以直接通过元素ID获取值：

const businessSize = document.getElementById('business-size').value;

2. 定义方案匹配规则 #

把所有网络方案和对应的选择条件映射起来，用数组存储方案对象，每个对象包含匹配条件和方案详情：

const networkSolutions = [
  {
    conditions: {
      businessSize: 'small',
      bandwidthNeed: 'low',
      remoteWork: 'no'
    },
    content: '*小型企业基础网络方案*：推荐100M光纤专线，搭配入门级企业路由器，满足日常办公上网需求。'
  },
  {
    conditions: {
      businessSize: 'medium',
      bandwidthNeed: 'medium',
      remoteWork: 'yes'
    },
    content: '*中型企业混合办公方案*：推荐500M对称光纤+SD-WAN组网，支持远程员工安全接入内部系统。'
  },
  {
    conditions: {
      businessSize: 'large',
      bandwidthNeed: 'high',
      industry: 'finance'
    },
    content: '*金融行业大型企业方案*：推荐双链路MPLS专线+异地灾备节点，保障数据传输的稳定性与安全性。'
  }
  // 更多方案按此格式添加
];

3. 实现筛选匹配逻辑 #

编写一个函数，对比用户选择与方案条件，找到匹配的方案。如果需要完全匹配所有条件，逻辑如下：

function findMatchingSolution(userSelections) {
  // 遍历所有方案，找到第一个完全匹配的
  return networkSolutions.find(solution => {
    // 检查方案的所有条件是否都被用户选择满足
    return Object.entries(solution.conditions).every(([key, value]) => {
      return userSelections[key] === value;
    });
  });
}

如果允许部分匹配（比如优先匹配关键条件），可以调整逻辑，比如给条件设置权重，或者按优先级排序方案后返回第一个符合部分条件的结果。

4. 展示匹配结果 #

将找到的方案展示到页面指定区域，比如一个结果容器：

function displaySolution() {
  const userSelections = Object.fromEntries(new FormData(form).entries());
  const matchedSolution = findMatchingSolution(userSelections);
  
  const resultContainer = document.getElementById('solution-result');
  if (matchedSolution) {
    resultContainer.innerHTML = `<h3>为您推荐的方案</h3><p>${matchedSolution.content}</p>`;
  } else {
    resultContainer.innerHTML = '<p>暂无匹配的方案，请调整选择后重试。</p>';
  }
}

// 给表单添加提交事件，或者给下拉框添加change事件实时触发
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  displaySolution();
});

额外优化建议 #

• 如果选项数量较多，可以给下拉框分组，减少匹配逻辑的复杂度
• 对于复杂的条件组合，可以使用JSON或者配置文件单独管理方案规则，便于后续维护
• 添加加载状态，避免用户重复提交

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