下拉菜单中所选选项的图片位置相关

Question

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

例如，如果从DropDrop1中选择了图片1，则我从下一个下拉列表中选择的任何图片都将继承与所选图片相应的padding，比如20px。

我想让一切都是依赖的(dropdown 1> dropdown 2> dropdown 3)，所以左边的下拉列表将位置条件放在右边的下拉列表中。例如，如果选择了DropDown2中的图片4，我从DropDown3中选择的任何内容都将具有50px左填充，但如果我从DropDown2中选择图片5，则DropDown3中的任何内容都将具有坐标60px左填充。

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

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

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

如果我从DropDown2中选择一张图片，DropDown3中的每一张图片都将继承DropDown2的位置，依此类推……

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

example picture

Answer 1

示例如何捕获change事件中的currently值。因此，您可以根据事件函数中的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>

​