Can I dynamically position pictures depending on the selected option in a dropdown menu?
For example, if picture 1 is selected from dropdown 1, whatever picture I select from the next dropdown will inherit padding-top accordingly to the selected picture, let say, 20px.
I want to make that everything depends (dropdown 1 > dropdown 2 > dropdown 3), so the left dropdown put position conditions to the right dropdowns. For example, if picture 4 from dropdown 2 is selected, anything I select from dropdown 3 will have 50px padding-left, but if I select picture 5 from dropdown 2, anything from dropdown 3 will have coordinates 60px padding-left.
Selected pictures from dropdowns should be loaded (changed) automatically on dropdown select, and also set a new rule for other dropdowns.
If picture 1 from dropdown 1 is selected it will show picture 1 in the blue div as is shown on the example picture and also will set a rule for every picture I choose from dropdown 2 to have padding-top: 20px
If I select picture 2 from dropdown 1 it will show picture 1 and also will set a rule for every picture from dropdown 2 to have padding-top: 30px
If I select a picture from dropdown 2 every picture from dropdown 3 will have inherited the position from dropdown 2, and so on...
I'm not sure if I explained it well but thanks for any suggestion you have.
Example how you can catch the currently values on a change event. So you can change the paddings of your images depending on the DropDownValues inside the event function.
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>