代码之家 › 专栏 › 技术社区 › doğukan

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

json arrays javascript

doğukan · 技术社区 · 7 年前

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

  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>

2 回复 | 直到 7 年前

p.s.w.g 7 年前

[
  {
    "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>

Siavas 7 年前

有几件事需要考虑:

由于您的模型列表与JSON对象中的maker嵌套在同一级别,因此可以使用该对象的索引更有效地查找所选maker的模型列表。这意味着,与其拥有 <option> 作为生成器,您将使用数组中的索引。为此,您必须添加 index 参数到您的 forEach : myArr.forEach(params, index)
要在选择一个项目时显示相关模型,您需要使用 onchange list1
对于更干净的代码,您需要访问 myArr , 清单1 据说 list2 从更高的层次 scope ,所以你必须在你的 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>