for in循环不填充下拉列表

Question

我正在尝试制作一个显示 select 框的网站，当您 select 正确的字符时，它会显示该字符的图片。以后我会抓取一个大的 JSON 格式如下的文件，但是我还在慢慢学习，所以我会一点一点地做。

我了解到 for...in 循环应该从每个属性中获取值，但它们返回为 'undefined'。为什么会这样，我该如何解决？

<!DOCTYPE html>
<html>

  <head>
    <title>Add Option From Array</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <select id="select" onchange="switchImage();"></select>


    <img src="https://abimon.org/dr/busts/aoi/00.png" id="charImg" alt="blank" />

    <script>
      var imageList = new Array();
      
      imageList[0] = new Image();
      imageList[0].src = "https://abimon.org/dr/busts/aoi/00.png";
      imageList[1] = new Image;
      imageList[1].src = "https://abimon.org/dr/busts/akane/00.png";
      imageList[2] = new Image;
      imageList[2].src = "https://ik.imagekit.io/drrp/sprites/angie/00.png";
      
      var select = document.getElementById("select"),
      
      drnames = '{"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"}',
      
      arr,
      
      i = 0;

      for (var x in drnames){
        arr[i] = drnames[x];
        i++;
        console.log(arr[i]);
      }
      
        /*arr = ["Aoi Asahina", "Akane Owari", "Angie Yonaga"];*/


      for (var i = 0; i < arr.length; i++) {
        var option = document.createElement("OPTION"),
          txt = document.createTextNode(arr[i]);
        option.appendChild(txt);
        option.setAttribute("value", arr[i]);
        select.appendChild(option);
        
      }

      function switchImage() {
        var index = document.getElementById("select").selectedIndex;
          charImg = document.getElementById("charImg");
        charImg.src = imageList[index].src;
      }

    </script>

  </body>

</html>

Answer 1

我刚去拿我的捐赠者 - 这里是缺少的解释：

您分配给 drnames
数组arr尚未初始化为数组。

<!DOCTYPE html>
<html>

  <head>
    <title>Add Option From Array</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <select id="select" onchange="switchImage();"></select>


    <img src="https://abimon.org/dr/busts/aoi/00.png" id="charImg" alt="blank" />

    <script>
      var imageList = new Array();
      
      imageList[0] = new Image();
      imageList[0].src = "https://abimon.org/dr/busts/aoi/00.png";
      imageList[1] = new Image;
      imageList[1].src = "https://abimon.org/dr/busts/akane/00.png";
      imageList[2] = new Image;
      imageList[2].src = "https://ik.imagekit.io/drrp/sprites/angie/00.png";
      
      var select = document.getElementById("select"),
      
      drnames = {"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"},
      
      arr=[],
      
      i = 0;

      for (var x in drnames){
        arr[i] = drnames[x];
        console.log(arr[i]);
        i++;
      }
      
        /*arr = ["Aoi Asahina", "Akane Owari", "Angie Yonaga"];*/


      for (var i = 0; i < arr.length; i++) {
        var option = document.createElement("OPTION"),
          txt = document.createTextNode(arr[i]);
        option.appendChild(txt);
        option.setAttribute("value", arr[i]);
        select.appendChild(option);
        
      }

      function switchImage() {
        var index = document.getElementById("select").selectedIndex;
          charImg = document.getElementById("charImg");
        charImg.src = imageList[index].src;
      }

    </script>

  </body>

</html>

回到这里 post 我意识到您可以用更少的代码完成同样的工作：

const images =["https://abimon.org/dr/busts/aoi/00.png","https://abimon.org/dr/busts/akane/00.png","https://ik.imagekit.io/drrp/sprites/angie/00.png"],
  [sel,img]=["select","charImg"].map(id=>document.getElementById(id)),
  drnames = {"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"};

sel.innerHTML=Object.values(drnames).map(nam=>`<option>${nam}</option>`).join();
(sel.onchange=()=>img.src=images[sel.selectedIndex])();

#charImg {width:200px}

<select id="select"></select>
<img id="charImg">

for in循环不填充下拉列表

for in loop not populating dropdown list

javascript

html

dropdown