如何根据多级dropdown menu选中选项动态调整对应图片位置

核心通过「预定义各下拉选项的样式映射」+「监听选中事件联动更新样式」就能实现你要的效果，具体逻辑如下：

1. 提前定义配置规则 #

先把每个下拉层级的选项对应的样式、图片地址都存在配置对象里，后续维护改配置就行，不用动逻辑：

// 各层级下拉配置，可根据自己的需求扩展
const levelConfig = {
  // 第一层下拉
  1: {
    '图片1': {
      imgSrc: '你的图片1本地/服务器地址',
      style: { paddingTop: '20px' }
    },
    '图片2': {
      imgSrc: '你的图片2本地/服务器地址',
      style: { paddingTop: '30px' }
    }
  },
  // 第二层下拉
  2: {
    '图片4': {
      imgSrc: '你的图片4本地/服务器地址',
      style: { paddingLeft: '50px' }
    },
    '图片5': {
      imgSrc: '你的图片5本地/服务器地址',
      style: { paddingLeft: '60px' }
    }
  },
  // 第三层下拉按需扩展
  3: {}
}
// 存储当前选中的所有层级的累积样式
const accumulatedStyles = {}
// 存储当前选中的各层级图片，用于预览区渲染
const selectedImgs = []

2. 绑定下拉选中事件 #

给所有下拉菜单绑定change监听，选中后按下面的逻辑处理：

• 拿到当前选中的层级、对应选项的配置，把该选项的样式合并到accumulatedStyles里
• 清空所有比当前层级更高的下拉的选中状态、同时删除accumulatedStyles里对应更高层级的样式、清空selectedImgs里更高层级的图片（比如修改了第一层的选项，第二层、第三层的选择都要重置，避免旧样式残留）
• 把当前选中的图片信息加入selectedImgs，触发预览区重新渲染

3. 预览区渲染逻辑 #

每次触发重新渲染时，遍历selectedImgs里的所有图片，给每张图片应用accumulatedStyles里对应层级之前的所有累积样式，插入到蓝色预览容器里就行。

如果想方便维护样式，也可以把style字段改成CSS类名，渲染的时候直接给图片加对应的类名即可，比行内样式更易调整。

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