如何基于动态表达式实现下拉选项的联动效果？

利用动态表达式实现下拉菜单联动效果

本文介绍如何通过自定义表达式动态控制下拉菜单选项的选中状态，从而实现下拉菜单之间的联动。 场景：用户界面包含多个下拉菜单，每个菜单关联一个表达式。当用户选择一个选项时，其他菜单的选中状态会根据表达式自动更新。

假设一个问卷包含多个下拉菜单选项，每个选项对应一个表达式（exp）。表达式使用变量 a, b, c, d 代表选项的选中状态（1 为选中，0 为未选中）。空表达式表示选项可由用户自由选择；非空表达式则由表达式决定选项的选中状态，用户无法直接修改。 核心在于根据用户选择更新所有选项的状态，并输出每个选项的 value（0 或 1）和 id。

JSON 数据定义了问卷结构，包含 id（唯一标识符）、title（选项标题）、exp（表达式）、value（初始为空）。下拉菜单绑定数据源：[{ value: 0, label: '否' }, { value: 1, label: '是' }]。

关键在于编写 JavaScript 函数处理用户选择（一个数组，每个元素包含 exp、value、id），并根据表达式计算每个选项的最终 value。

以下代码实现该功能，但请注意，使用 eval() 函数存在安全风险，实际应用中应替换为更安全的表达式求值方法，例如使用一个安全的表达式解析器库：

function processUserInput(dropdownSelectionObj) {
  // 输入校验
  if (!dropdownSelectionObj || dropdownSelectionObj.length !== 5) {
    throw new Error("Invalid dropdown selection object.");
  }

  // 获取用户选择的变量值
  const a = dropdownSelectionObj[0].value ? 1 : 0; // 假设第一个选项的index为0
  const b = dropdownSelectionObj[1].value ? 1 : 0;
  const c = dropdownSelectionObj[2].value ? 1 : 0;
  const d = dropdownSelectionObj[3].value ? 1 : 0;
  const e = dropdownSelectionObj[4].value ? 1 : 0; // 假设第五个选项的index为4


  // 处理每个选项
  const result = dropdownSelectionObj.map(item => {
    let val = 0;
    if (item.value !== undefined && item.value !== null) { // 使用undefined和null进行判断，更严谨
      val = item.value; // 用户直接选择
    } else if (item.exp) {
      try {
        val = eval(item.exp) ? 1 : 0; // 使用try catch处理潜在的eval错误
      } catch (error) {
        console.error("Expression evaluation error:", error);
        // 处理错误，例如设置默认值或抛出异常
        val = 0; 
      }
    }
    return { value: val, id: item.id };
  });

  return result;
}

此函数首先验证输入，然后根据用户选择更新 a、b、c、d、e 变量。 之后遍历每个选项，根据 exp 和 value 计算最终 value，返回包含 value 和 id 的数组。 改进后的代码增加了错误处理机制，避免了 eval() 函数可能抛出的异常，提高了代码的健壮性。 再次强调，实际应用中应该避免直接使用 eval()，而采用更安全的方式处理表达式。