时间戳

首页 > 解决方案 > 如何在 JavaScript 中动态地将图像添加到级联选择？

javascript - 如何在 JavaScript 中动态地将图像添加到级联选择？

问题描述

我正在做一个项目，我需要根据用户的选择进行动态变化的级联选择。这个小网站在访问时会提示用户选择两个控制台中的一个，然后据此为所述控制台选择一种颜色，然后选择它附带的游戏。这是我拥有的当前 JS 和 HTML：

HTML

<html>
    <head>
        <title>Cascading Selects</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h2>Console Picker/Store</h2>

        <div id="selectsDiv">
        </div>
        <script src="selectData.js"></script>
        <script src="createSelects.js" ></script>
    </body>
</html>

JS 创建选择：

    let selectsDiv = document.getElementById("selectsDiv");

    let consoleSelect = document.createElement('select');
    consoleSelect.setAttribute("id", "console");
    consoleSelect.options.add(new Option('-- Select a Console --', 'console')); //new Option(text, value) 
    selectsDiv.appendChild(consoleSelect);

    let colorSelect = document.createElement('select');
    colorSelect.setAttribute("id", "color");
    colorSelect.options.add(new Option('-- Select a Color --', 'color'));
    selectsDiv.appendChild(colorSelect);

    let gameSelect = document.createElement('select');
    gameSelect.setAttribute("id", "game");
    gameSelect.options.add(new Option('-- Select a Game --', 'game'));
    selectsDiv.appendChild(gameSelect);


    for (let console in selectData) { //for...in iterates over object properties        
        consoleSelect.options.add(new Option(console, console)); //new Option(text, value) 
    }
    

    consoleSelect.onchange = function () {
        // remove previous options from depending selects
        colorSelect.length = 1;
        gameSelect.length = 1;
        // add options to the depending select based on the current select value
        for (let color in selectData[this.value]) {
            colorSelect.options.add(new Option(color, color));
        }
    };

    colorSelect.onchange = function () {
        // remove previous options from depending selects
        gameSelect.length = 1;
        for (let game in selectData[this.previousElementSibling.value][this.value]) {
            gameSelect.options.add(new Option(game, game));
        }
    };


};

JS选择中的数据：

const selectData = {//JS Object which properties are strings
    "Nintendo Switch": {
        "Blue-Red Version": {
            "Pokemon Sword": 0,
            "Pokemon Shield": 0
        },
        "Gray-Black Version": {
            "Legend of Zelda: Breath of The Wild": 0,
            "Super Smash Bros. Ultimate": 0,
        }
    },
    "PlayStation 5": {
        "Digital Version (White)": {
            "Marvel's Spider-Man: Miles Morales (Digital Download)": 0
        },
        "Disc Version (White)": {
            "Demon's Souls: Remake": 0
        }
    }
};

我的问题是，例如，当有人点击“Nintendo Switch”时，如何在页面的选择框下动态显示 Switch 的图像？等等等等根据进一步的选择动态地改变那个图像？

标签： javascripthtml

解决方案

您可以做的是创建一个consoles对象，其中包含作为对象键的控制台名称和控制台图片路径 url 的值。然后一旦完成，您可以根据值更改图像元素的 srcselect dropdown

如果您检查 Playstation5 控制台，您会看到图像不会更改，但这只是更新consoles对象的问题

const consoles = {
 "Nintendo Switch": { 
     "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch",
    "Blue-Red Version": {
      "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch - Blue Red Version",
      "Pokemon Sword": {
        "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch - Blue Red Version - Pokemon Sword",
      },
      "Pokemon Shield": {
        "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch - Blue Red Version - Pokemon Shield",
      }
    },
    "Gray-Black Version": {
      "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch - Gray-Black Version",
      "Legend of Zelda: Breath of The Wild": {
        "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch - Gray-Black Version - Legend of Zelda: Breath of The Wild",
      },
      "Super Smash Bros. Ultimate": {
        "picture" : "https://dummyimage.com/200x200/63acf0/fff&text=Nintendo Switch",
      }
    }
 },
 "PlayStation 5": { 
     "picture" : "https://dummyimage.com/100x100/63acf0/fff&text=Playstation 5",
    "Digital Version (White)": {
      "picture" : "https://dummyimage.com/100x100/63acf0/fff&text=Playstation 5",
      "Marvel's Spider-Man: Miles Morales (Digital Download)": {
        "picture" : "https://dummyimage.com/100x100/63acf0/fff&text=Playstation 5",
      }
    },
    "Disc Version (White)": {
      "picture" : "https://dummyimage.com/100x100/63acf0/fff&text=Playstation 5",
      "Demon's Souls: Remake": {
        "picture" : "https://dummyimage.com/100x100/63acf0/fff&text=Playstation 5",
      }
    }
 },
}
const selectData = {//JS Object which properties are strings
    "Nintendo Switch": {
        "Blue-Red Version": {
            "Pokemon Sword": 0,
            "Pokemon Shield": 0
        },
        "Gray-Black Version": {
            "Legend of Zelda: Breath of The Wild": 0,
            "Super Smash Bros. Ultimate": 0,
        }
    },
    "PlayStation 5": {
        "Digital Version (White)": {
            "Marvel's Spider-Man: Miles Morales (Digital Download)": 0
        },
        "Disc Version (White)": {
            "Demon's Souls: Remake": 0
        }
    }
};

let selectedConsole, selectedColor, selectedGame;

let consolePicture = document.getElementById("consolePicture");
let selectsDiv = document.getElementById("selectsDiv");

let consoleSelect = document.createElement('select');
consoleSelect.setAttribute("id", "console");
consoleSelect.options.add(new Option('-- Select a Console --', 'console')); //new Option(text, value) 
selectsDiv.appendChild(consoleSelect);

let colorSelect = document.createElement('select');
colorSelect.setAttribute("id", "color");
colorSelect.options.add(new Option('-- Select a Color --', 'color'));
selectsDiv.appendChild(colorSelect);

let gameSelect = document.createElement('select');
gameSelect.setAttribute("id", "game");
gameSelect.options.add(new Option('-- Select a Game --', 'game'));
selectsDiv.appendChild(gameSelect);


for (let console in selectData) { //for...in iterates over object properties        
  consoleSelect.options.add(new Option(console, console)); //new Option(text, value) 
}

function setPicture(picture) {
 consolePicture.src = picture;
}

consoleSelect.onchange = function () {
  // remove previous options from depending selects
  colorSelect.length = 1;
  gameSelect.length = 1;
  // add options to the depending select based on the current select value
  for (let color in selectData[this.value]) {
    colorSelect.options.add(new Option(color, color));
  }
  selectedConsole = consoles[this.value];
  setPicture(selectedConsole.picture)
};

colorSelect.onchange = function () {
  // remove previous options from depending selects
  gameSelect.length = 1;
  for (let game in selectData[this.previousElementSibling.value][this.value]) {
    gameSelect.options.add(new Option(game, game));
  }
  
  selectedColor = selectedConsole[this.value];
  setPicture(selectedColor.picture)
}

gameSelect.onchange = function() { 
    selectedGame = selectedColor[this.value]
  setPicture(selectedGame.picture)
}
<html>
    <head>
        <title>Cascading Selects</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h2>Console Picker/Store</h2>

        <div id="selectsDiv">
        </div>
        <img id="consolePicture" />
        <script src="selectData.js"></script>
        <script src="createSelects.js" ></script>
    </body>
</html>

推荐阅读