Javascript 如何列出我使用Json选择的品牌型号？

我想在第二个标签中列出我选择的品牌的型号。我需要这个做作业。我不知道该怎么办。请帮帮我

函数notlarileparam{ var httpistegi=新的XMLHttpRequest； var adres=https://raw.githubusercontent.com/atakanbalta/Moto-karsilastirma/master/markalar.json; httpistegi.onreadystatechange=函数{ 如果this.readyState==4&&this.status==200{ var myArr=JSON.parsethis.responseText； var list1=document.querySelectorslc1； myArr.forEachfunctionparams{ list1.innerHTML+=+params.marka+； }; } }; httpistegi.openGET，adres，true； httpistegi.send； } 诺拉里斯特勒； 挑选{ 宽度：100px； 高度：20px； }

---

您希望从HTTP请求的结果中加载并填充两个下拉列表，其中第一个下拉列表的值确定第二个下拉列表中出现的选项。您的回答如下所示：

[
  {
    "marka": "BMW",
    "modeller": [
      "BMW 1000RR",
      "R 1200 Rs",
      ...
    ]
  },
  {
    "marka": "SUZUKI",
    "modeller": [
      "HAYABUSA",
      "RAIDER",
      ...
    ]
  },
  ...
]

让我们首先通过忽略HTTP请求来简化这个问题，因为看起来您已经完成了该部分的工作。我们现在可以对结果进行硬编码，这样我们就可以关注下拉列表是如何交互的

这里的关键是，当您更改“品牌”下拉列表的值时，需要重新填充“模型”下拉列表。您可以通过收听品牌下拉列表中的事件来完成此操作：

<select>.addEventListener("change", function(event) {
  ...
});

把它放在一起，我们得到如下结果：

[
  {
    "marka": "BMW",
    "modeller": [
      "BMW 1000RR",
      "R 1200 Rs",
      ...
    ]
  },
  {
    "marka": "SUZUKI",
    "modeller": [
      "HAYABUSA",
      "RAIDER",
      ...
    ]
  },
  ...
]

常数jsonData=[{ 马克：宝马， 建模者：[ 宝马1000RR， R 1200卢比， S1000rr， K 1600B， K 1600Gtl， K 1600 gt， R 1200 rt， R 1200r， R 1200克， F 750克， G 450 X， S 1000 XR ] }, { 马克：铃木， 建模者：[ HAYABUSA， 袭击者， GSX 1000R， Gsx r1000 abs， V-strom 1000， V-strom 650， 伯格曼400z， 伯格曼650Z， V-strom 250 ] }, ]; const brandList=document.getElementByIdbrandList； const modelList=document.getElementByIdmodelList； 函数populateBrandList{ brandList.innerHTML=； jsonData.forEachfunctionparams{ brandList.innerHTML+=+params.marka+； }; } 函数populateModelListbrand{ var brandInfo=jsonData.findfunctionparams{return params.marka==brand}； 如果品牌信息{ modelList.innerHTML=； brandInfo.Modeler.forEachfunctionparams{ modelList.innerHTML+=+params+； }; } } brandList.addEventListenerchange，functionevent{ PopulateModelListeEvent.target.value； }; 大众品牌列表；

---

有几件事需要考虑：

由于您的模型列表与JSON对象中的maker嵌套在同一级别，因此可以使用该对象的索引更有效地查找所选maker的模型列表。这意味着，您将使用数组中的索引，而不是将的值作为生成器。为此，必须将index参数添加到：myArr.forEachparams，index

为了在选择一个项目时显示相关模型，您需要使用JavaScript事件，但也需要在使用第一个值预选list1时在页面开头触发此事件

对于更干净的代码，您需要从更高的级别访问myArr、list1和假定的list2，因此您必须在onreadystatechange事件处理程序之外声明它们

考虑了以上所有因素后，试着想想如何借助参考链接实现这一点。一旦您得到了它，或者至少尝试了，请查看下面的代码片段，了解如何实现这一点。请记住，解决这个问题没有唯一的方法，但总有比其他方法更好的方法——通过保持代码的一致性，这个方法应该做得很好

函数notlarileparam{ var httpistegi=新的XMLHttpRequest； var adres=https://raw.githubusercontent.com/atakanbalta/Moto-karsilastirma/master/markalar.json; var myArr；//将数组存储在此处，以便在两个函数中都可以访问它 var list1=document.querySelectorslc1； var list2=document.querySelectorslc2； list1.onchange=函数{ //首先清空第二个列表 list2.innerHTML=； myArr[this.value].modeller.forEachfunctionmodel{ list2.innerHTML+=+model+； }; } httpistegi.onreadystatechange=函数{ 如果this.readyState==4&&this.status==200{ myArr=JSON.parsethis.responseText； myArr.forEachfunctionparams，索引{ list1.innerHTML+=+params.marka+； }; list1.onchange；//首先触发一次以填充列表。 } }; httpistegi.openGET，adres，true； httpistegi.send； } 诺拉里斯特勒； 挑选{ 宽度：100px； 高度：20px； }

---

您的精彩演练@p.s.w.g: