與JSON數據源級聯選擇

Question

我正在嘗試基於作為JSON檢索的數據構建級聯選擇。

我正在嘗試與所有現代瀏覽器（IE11 +）取得最佳性能和兼容性。

該行為是：

1. 用戶選擇一個市場
2. 創建一個新選擇，其中包含與所選市場有關的商品列表
3. 用戶選擇商品
4. 創建具有與所選商品相關的價格類型列表的新選擇

JSON數據的結構如下：

[{
    "marketName": "def",
    "marketId": 124,
    "commodities": [
      {
        "commodityName": "Maize",
        "commodityId": 21,
        "priceTypes": [
          {
            "typeName": "Wholesale",
            "typeId": 16,
            "unitOfMeasures": [
              {
                "unitName": "MT",
                "unitId": 80
              }
            ]
          }
        ]
      }
   }]

如果有一種更有效的表示方式，我也可以更改上述結構。

我正在使用的js代碼如下：

var marketSelect=document.createElement('select');
marketSelect.addEventListener("change", function(){
    showCommodities(this.options[this.selectedIndex].value);
});

json.forEach(function(obj) {
   var opt = document.createElement("option");
   opt.value= obj.marketId;
   opt.innerHTML = obj.marketName;
   marketSelect.appendChild(opt);
});
document.getElementById('app').appendChild(marketSelect);

我被困在第二點，因為我不明白如何只選擇所選市場的商品

在這里，我准備了一個帶有完整數據示例的jsfiddle： https ://jsfiddle.net/182dnzbL/1/

Answer 1

我想我已經解決了這種方式：

var marketSelect=document.createElement('select');
marketSelect.addEventListener("change", function(){
    showCommodities(this.options[this.selectedIndex].value);
});

json.forEach(function(obj) {
   var opt = document.createElement("option");
   opt.value= obj.marketId;
   opt.innerHTML = obj.marketName;
   marketSelect.appendChild(opt);
});
document.getElementById('app').appendChild(marketSelect);


function showCommodities(marketId){
  var commoditySelect=document.createElement('select');
  commoditySelect.addEventListener("change", function(){
      //showPriceTypes...
  });
  var commodities = json.filter(e=>e.marketId==marketId)[0].commodities;
  commodities.forEach(function(obj) {
     var opt = document.createElement("option");
     opt.value= obj.commodityId;
     opt.innerHTML = obj.commodityName;
     commoditySelect.appendChild(opt);
  });
  document.getElementById('app').appendChild(commoditySelect);
}

因此，通過此指令，我只能獲取所需的數據：var goods = json.filter（e => e.marketId == marketId）[0] .commodities;

這是小提琴： https : //jsfiddle.net/182dnzbL/4/

 var json = [{ "marketName": "abc", "marketId": 123, "commodities": [{ "commodityName": "Maize", "commodityId": 21, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] } ] }, { "commodityName": "Wheat", "commodityId": 22, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }] }, { "commodityName": "Rice", "commodityId": 23, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] } ] }, { "commodityName": "Milk", "commodityId": 24, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }, { "unitName": "10 L", "unitId": 74 } ] } ] } ] }, { "marketName": "def", "marketId": 124, "commodities": [{ "commodityName": "Maize", "commodityId": 21, "priceTypes": [{ "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] }] }, { "commodityName": "Wheat", "commodityId": 22, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "12.5 KG", "unitId": 73 }] }] }, { "commodityName": "Rice", "commodityId": 23, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] } ] }, { "commodityName": "Oil", "commodityId": 26, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }, { "unitName": "15 L", "unitId": 77 } ] } ] } ] } ]; var marketSelect = document.createElement('select'); marketSelect.addEventListener("change", function() { showCommodities(this.options[this.selectedIndex].value); }); json.forEach(function(obj) { var opt = document.createElement("option"); opt.value = obj.marketId; opt.innerHTML = obj.marketName; marketSelect.appendChild(opt); }); document.getElementById('app').appendChild(marketSelect); function showCommodities(marketId) { var commoditySelect = document.createElement('select'); commoditySelect.addEventListener("change", function() { //showPriceTypes... }); var commodities = json.filter(e => e.marketId == marketId)[0].commodities; commodities.forEach(function(obj) { var opt = document.createElement("option"); opt.value = obj.commodityId; opt.innerHTML = obj.commodityName; commoditySelect.appendChild(opt); }); document.getElementById('app').appendChild(commoditySelect); } 

 <div id="app"></div>