¿Puedo posicionar dinámicamente las imágenes según la opción seleccionada en un menú desplegable?
Por ejemplo, si se selecciona la imagen 1 del menú desplegable 1, cualquier imagen que seleccione del siguiente menú desplegable heredará el relleno superior de acuerdo con la imagen seleccionada, digamos, 20 px.
Quiero hacer que todo dependa (menú 1 > menú desplegable 2 > menú desplegable 3), por lo que el menú desplegable de la izquierda pone las condiciones de posición en los menús desplegables de la derecha. Por ejemplo, si se selecciona la imagen 4 del menú desplegable 2, todo lo que seleccione del menú desplegable 3 tendrá un relleno a la izquierda de 50 px, pero si selecciono la imagen 5 del menú desplegable 2, cualquier elemento del menú desplegable 3 tendrá unas coordenadas de 60 px a la izquierda.
Las imágenes seleccionadas de los menús desplegables deben cargarse (cambiarse) automáticamente en la selección del menú desplegable y también establecer una nueva regla para otros menús desplegables.
Si se selecciona la imagen 1 del menú desplegable 1, se mostrará la imagen 1 en el div azul como se muestra en la imagen de ejemplo y también se establecerá una regla para que cada imagen que elija del menú desplegable 2 tenga relleno superior: 20px
Si selecciono la imagen 2 del menú desplegable 1, mostrará la imagen 1 y también establecerá una regla para que cada imagen del menú desplegable 2 tenga un relleno superior: 30px
Si selecciono una imagen del menú desplegable 2, cada imagen del menú desplegable 3 habrá heredado la posición del menú desplegable 2, y así sucesivamente...
No estoy seguro si me expliqué bien, pero gracias por cualquier sugerencia que tengas.
Ejemplo de cómo puede capturar los valores actuales en un evento de cambio. Entonces puede cambiar los rellenos de sus imágenes según los DropDownValues dentro de la función de evento.
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>