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

Question

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

  function notlariListele(param) {
      var httpistegi = new XMLHttpRequest();
      var adres = "https://raw.githubusercontent.com/atakanbalta/Moto-karsilastirma/master/markalar.json";
    
    
      httpistegi.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var myArr = JSON.parse(this.responseText);
          var list1 = document.querySelector("#slc1");
          myArr.forEach(function(params) {
            list1.innerHTML += '<option value="'+ params.marka +'">' + params.marka + '</option>';
          });
        }
      };
      httpistegi.open("GET", adres, true);
      httpistegi.send();
    }
  
    notlariListele();

select {
  width:100px;
  height:20px;
}

<select id="slc1"></select>
<select id="slc2"></select>

Answer 1

您想要从 HTTP 请求的结果中加载填充两个下拉列表，其中第一个下拉列表的值决定第二个下拉列表中显示的选项。您的回复如下所示:

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

让我们首先通过忽略 HTTP 请求来简化问题，因为看起来您已经让该部分正常工作了。我们现在可以对结果进行硬编码，这样我们就可以专注于下拉菜单如何交互。

这里的关键是，当您更改品牌下拉列表的值时，您需要重新填充模型下拉列表。您可以通过收听change来做到这一点。品牌下拉事件:

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

然后使用选择的值搜索用户感兴趣的品牌。这可以通过多种方式完成，但在本示例中，我们将使用 find :

var myItem = myArr.find(function(params){ return <some condition> });

把它们放在一起，我们得到这样的结果:

const jsonData = [{
    "marka": "BMW",
    "modeller": [
      "BMW 1000RR",
      "R 1200 Rs",
      "S1000rr",
      "K 1600B",
      "K 1600Gtl",
      "K 1600 gt",
      "R 1200 rt",
      "R 1200r",
      "R 1200 Gs",
      "F 750 GS",
      "G 450 X",
      "S 1000 XR"
    ]
  },
  {
    "marka": "SUZUKI",
    "modeller": [
      "HAYABUSA",
      "RAIDER",
      "GSX 1000R",
      "Gsx r1000 abs",
      "V-strom 1000",
      "V-strom  650",
      "Burgman 400z",
      "Burgman650z",
      "V-strom 250"
    ]
  },
];

const brandList = document.getElementById("brandList");
const modelList = document.getElementById("modelList");

function populateBrandList() {
  brandList.innerHTML = '';
  jsonData.forEach(function(params) {
    brandList.innerHTML += '<option value="' + params.marka + '">' + params.marka + '</option>';
  });
}
function populateModelList(brand) {
  var brandInfo = jsonData.find(function(params){ return params.marka === brand });
  if (brandInfo) {
    modelList.innerHTML = '';
    brandInfo.modeller.forEach(function(params) {
      modelList.innerHTML += '<option value="' + params + '">' + params + '</option>';
    });
  }
}

brandList.addEventListener("change", function(event) {
  populateModelList(event.target.value);
});
populateBrandList();

<select id="brandList"></select>
<select id="modelList"></select>