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>

Answer 2

有几件事要考虑：

由于模型列表与JSON对象中的制造商嵌套在同一级别，因此您可以使用该对象的索引来更有效地查找所选制造商的模型列表。这意味着您将使用数组中的索引，而不是使用<option>的值作为创建者。为此，您必须将index参数添加到forEach：myArr.forEach(params, index)
要在选择一个项目时显示相关模型，您将需要使用onchange JavaScript事件，并且在list1为预先选择第一个值。
对于更简洁的代码，您将需要从更高的scope访问myArr，list1以及据推测的list2，因此您必须声明它们放在您的onreadystatechange事件处理程序之外。

在考虑了以上所有内容之后，请尝试思考如何借助引用的链接来实现此目标。一旦获得（或至少尝试过），请查看下面的代码片段以了解如何实现。请记住，没有一种解决此问题的独特方法，但是总是有比其他方法更好的方法–这种方法应该通过保持代码的一致性来很好地完成工作。

function notlariListele(param) {
  var httpistegi = new XMLHttpRequest();
  var adres = "https://raw.githubusercontent.com/atakanbalta/Moto-karsilastirma/master/markalar.json";
  var myArr; // Store array here so that it is accessible in both functions
  var list1 = document.querySelector("#slc1");
  var list2 = document.querySelector("#slc2");

  list1.onchange = function() {
    // Empty second list first
    list2.innerHTML = '';
    myArr[this.value].modeller.forEach(function(model) {
      list2.innerHTML += '<option value="' + model + '">' + model + '</option>';
    });
  }

  httpistegi.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myArr = JSON.parse(this.responseText);
      myArr.forEach(function(params, index) {
        list1.innerHTML += '<option value="' + index + '">' + params.marka + '</option>';
      });
      list1.onchange(); // Trigger once to populate list at first.
    }
  };
  httpistegi.open("GET", adres, true);
  httpistegi.send();


}

notlariListele();

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

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

如何列出我在Json上选择的品牌的型号？

2 个答案: