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

Question

I am working on a project where I need to make cascading selects that dynamically change based on what the user selects.我正在做一个项目，我需要根据用户的选择进行动态变化的级联选择。 This small website, when visited, will prompt the user to select one of two consoles, and then, based off of that, to select a color for said console, and then to choose a game that comes with it.访问这个小网站时，将提示用户 select 两个控制台之一，然后基于此，select 为所述控制台选择颜色，然后选择它附带的游戏。 Here is the current JS and HTML I have:这是我当前的 JS 和 HTML：

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 creating the selects: 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 the data within the selects: 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
        }
    }
};

My question is, when someone clicks on "Nintendo Switch" for example, how can I have an image of the Switch show up dynamically under the select box on the page?我的问题是，例如，当有人点击“Nintendo Switch”时，如何在页面上的 select 框下动态显示 Switch 的图像？ And so on and so forth change that image dynamically based on further selects?等等等等根据进一步的选择动态地改变那个图像？

Answer 1

What you can do is to create a consoles object, containing the name of the console as the object key and the value to the path url for your console picture.您可以做的是创建一个consoles object，其中包含控制台的名称作为 object 键和路径 url 的值。 Then once done that, you change the src of the image element based on the value of the select dropdown然后一旦完成，您可以根据select dropdown的值更改图像元素的 src

If you check Playstation5 console you'll see that images don't change, but that's just a matter of updating your consoles object如果您检查 Playstation5 控制台，您会看到图像没有改变，但这只是更新consoles object 的问题

 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>

Answer 2

You can pass an argument to the callback function assigned to the onchange event that has a property called target which is a reference to the object onto which the event was dispatched which is here an option that has a value您可以将参数传递给分配给onchange事件的回调 function 的参数，该事件具有一个名为target的属性，该属性是对 object 的引用，该事件被调度到该属性上，这是一个具有值的选项

 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 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 (e) { // 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)); } if (e.target.value === 'Nintendo Switch') { console.log('Nintendo Switch selected'); } else if (e.target.value === 'PlayStation 5') { console.log('PlayStation 5 selected'); } }; 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)); } };

 <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>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-02-20 17:19:18

解决方案2
0 2021-02-20 17:21:11

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-02-20 17:19:18

解决方案2 0 2021-02-20 17:21:11

解决方案1
1 已采纳 2021-02-20 17:19:18

解决方案2
0 2021-02-20 17:21:11