图片位置取决于下拉菜单中的选定选项答案

【问题标题】：Picture position dependant of the selected option in a dropdown menu图片位置取决于下拉菜单中的选定选项
【发布时间】：2021-11-11 21:39:49
【问题描述】：

我可以根据下拉菜单中的选定选项动态定位图片吗？

例如，如果从下拉列表 1 中选择图片 1，则我从下一个下拉列表中选择的任何图片都将根据所选图片继承 padding-top，比如说 20px。

我想让一切都取决于（下拉菜单 1 > 下拉菜单 2 > 下拉菜单 3），因此左侧下拉菜单将位置条件置于右侧下拉菜单中。例如，如果选择了下拉菜单 2 中的图片 4，则我从下拉菜单 3 中选择的任何内容都将具有 50px 的 padding-left，但如果我从下拉菜单 2 中选择图片 5，则下拉菜单 3 中的任何内容都将具有 60px 的坐标。

从下拉列表中选择的图片应在下拉选择时自动加载（更改），并为其他下拉列表设置新规则。

如果选择了下拉菜单 1 中的图片 1，它将在蓝色 div 中显示图片 1，如示例图片所示，并且还将为我从下拉菜单 2 中选择的每张图片设置规则，使其具有 padding-top: 20px

如果我从下拉列表 1 中选择图片 2，它将显示图片 1，并且还会为下拉列表 2 中的每张图片设置一个规则，使其具有 padding-top: 30px

如果我从下拉列表 2 中选择一张图片，则下拉列表 3 中的每张图片都将继承下拉列表 2 中的位置，依此类推...

我不确定我是否解释得很好，但感谢您的任何建议。

example picture

【问题讨论】：

标签： javascript html css

【解决方案1】：

示例如何捕获更改事件的当前值。因此，您可以根据事件函数中的 DropDownValues 更改图像的填充。

const dropDown1 = document.getElementById('dropDown1');
const dropDown2 = document.getElementById('dropDown2');
const dropDown3 = document.getElementById('dropDown3');
function changeDrop(){
  console.log(dropDown1.value);
  console.log(dropDown2.value);
  console.log(dropDown3.value);
  // Select your Images and define the paddings
}

<label for="dropDown1">Drop 1:</label>
<select name="dropDown1" id="dropDown1" onchange="changeDrop()">
  <option value="pic1">Pic 1</option>
  <option value="pic2">Pic 2</option>
  <option value="pic3">Pic 3</option>
</select>

<label for="dropDown2">Drop 2:</label>
<select name="dropDown2" id="dropDown2" onchange="changeDrop()">
  <option value="pic4">Pic 4</option>
  <option value="pic5">Pic 5</option>
  <option value="pic6">Pic 6</option>
</select>

<label for="dropDown3">Drop 3:</label>
<select name="dropDown3" id="dropDown3" onchange="changeDrop()">
  <option value="pic7">Pic 7</option>
  <option value="pic8">Pic 8</option>
  <option value="pic9">Pic 9</option>
</select>

【讨论】：