将多维javascript数组中的代码添加到html页面

我正在开发一个网站，该网站应该允许您使用javascript过滤图片。您可以使用html下拉列表选择搜索条件

我现在想把图像的代码插入html文件，但我真的不知道怎么做

下面是一个下拉列表示例：

<select id="HairColor" onchange="getCharacters()">
    <option value="default">Select Hair Color</option>
    <option value=""></option>                          
    <option value="brown">Brown</option>
    <option value="fair">Fair</option>
    <option value="black">Black</option>
    <option value="blue">Blue</option>
</select>

下面是javascript文件：

var ika = ["anime1", "female", "blue", "blue", "genki", "<12", '<a href="character.html"><div id="onecard"><img src="characters/Ika/ika.jpg" height="280" width="180"><div id="description">Ika Musume<br>Shinryaku! Ika Musume</div></div></a>', true];
var hotaru = ["anime2", "female", "brown", "brown", "other", "12-24", '<a href="character.html"><div id="onecard"><img src="characters/Non/hotaru.jpg" height="280" width="180"><div id="description">Hotaru Ichijou<br>Non Non Biyori</div></div></a>', true];
var suguru = ["anime2", "male", "brown", "black", "other", "12-24", '<a href="character.html"><div id="onecard"><img src="characters/Non/suguru.jpg" height="280" width="180"><div id="description">Suguru Koshigaya<br>Non Non Biyori</div></div></a>', true];


var characters = [ika, hotaru, suguru];

function getCharacters() {

    var selection = [document.getElementById("Anime").value, document.getElementById("Gender").value, document.getElementById("HairColor").value, document.getElementById("EyeColor").value, document.getElementById("Personality").value, document.getElementById("AgeRange").value];

    for(i = 0; i < characters.length; i++){
        characters[i][7] = true;
        for(j = 0; j < selection.length && characters[i][7] != false; j++){
            if (characters[i][j] != selection[j] && selection[j] != "default"){
                characters[i][7] = false;
            }
        }
    }

    var count = 0;
    var output;
    for(i = 0; i < characters.length; i++){
        if(characters[i][7] == true){
            output[count] = characters[i];
            count++;
        }
    }

    var element = document.getElementById("cards");
    for(i=0; i<output.length; i++){
        element.innerHTML = output[i][6];
    }
}

我希望将六个数组位置上的代码输出到cards div中，但它没有任何作用。我还希望每次选择新的内容时都能重新开始，这样旧图像就不会留在div中

谁能告诉我我做错了什么？老实说，我一点头绪也没有，我已经不知所措了

感谢您的帮助

---

编辑：在一个字符数组中添加或缺少。但似乎仍然不起作用。

这一次很艰难，但我认为我们成功了

好的，首先我们从一个字符数组切换到一个对象，这样我们就可以使用键：值对了。这将发挥作用。我们也没有创建一个选择数组，而是完全抛弃了它。每一个下拉列表都将为我们提供所需的一切。然后我们创建一个简单的循环，遍历字符数组中的每个字符，查看它们的键和键的值，看看它是否与发送方的值obj.value匹配

GetCharacters此“动画”-这是对象，稍后我们将通过此对象获取obj.value。anime是函数中使用的类型变量，也是key:value对中的键

在函数开始时，我们会进行一些重置，因此当您选择新的内容时，它会清除卡片并重新显示正确的字符

---

var ika={动画：'anime1'，性别：'femal'，头发：'blue'，眼睛：'blue'，个性：'genki'，年龄：'你的suguru数组有一个错误。缺失，在结尾的true之前。除了排序之外，你是否计划使用原始数组中的任何信息？比如你计划在卡片上显示你的角色的信息吗？你正在使用global-循环计数器，这总是一种代码味道。Use for var i=…您也没有附加HTML，每次在最后一个for循环中都会覆盖它。使用element.innerHTML+=output[i][6]进行附加。而dddddd…output不是数组，我想您希望它是数组。将其声明为var output=[]；相反。你能添加一个可以重现问题的工作示例吗？使用堆栈片段或JSFIDLE之类的吗？@Press:我修复了，也更改了Cory建议的内容，但似乎仍然不起作用。我正在尝试在字符数组的第六个数组槽上输出代码。就这样！非常感谢你。我真的很感激你谢谢你，伙计。说真的。我现在可以吻你。嗯，不需要，但谢谢你。如果你有任何问题，请发帖，我会在附近。