Question

我正在尝试基于作为JSON检索的数据构建级联选择。

我正在努力实现最佳性能，并与所有现代浏览器（IE11 +）兼容。

行为是：

用户选择一个市场
创建一个新商品，其中包含与所选市场有关的商品列表
用户选择商品
具有与所选商品相关的价格类型列表的新商品商品已创建

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商品= 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>

与JSON数据源级联选择

1 个答案: