Javascript：根据第一个选择框的值将值放入第二个选择框

Question

我陷入了困境。

我在对象下面。

{
  "products": [
    {
      "product": "Alpha 1",
      "values": [
        "10",
        "20",
        "30",
        "40",
        "50"
      ]
    },
    {
      "product": "Alpha 2",
      "values": [
        "20",
        "30",
        "40",
      ]
    },
    {
      "product": "Beta",
      "values": [
        "30",
        "80",
        "60"
      ]
    }
  ]
}

所以我想输出为

如果选择了产品“ Alpha 1”，则其相关值（如10,20,30,40,50将显示在第二选择框中。

依此类推..

我该怎么做？

任何帮助都会很棒。

Answer 1

这只是一个JSON对象，所以我不确定您要在哪种语言中查找输出。但是我可以在javascript中完成此操作。

产品是由三个对象组成的数组。

将这个大对象声明为变量。

var myObject = {
  "products": [
    {
      "product": "Alpha 1",
      "values": [
        "10",
        "20",
        "30",
        "40",
        "50"
      ]
    },
    {
      "product": "Alpha 2",
      "values": [
        "20",
        "30",
        "40",
      ]
    },
    {
      "product": "Beta",
      "values": [
        "30",
        "80",
        "60"
      ]
    }
  ]
}

现在我们可以操纵对象了。下一个示例将把产品阵列打印到控制台。
console.log(myObject.products)

您正在es6（现代javascript）中寻找的答案是：
var name = myObject.products[0].product; // selecting first element of array
var values = myObject.products[0].values;
// create a string
var strOfValues = values.join(' ');
console.log(`The values of ${name} are ${strOfValues}`) // <--

这是一个硬编码的解决方案，它从数组中获取第一个元素。最好编写一个函数，然后根据其名称从数组中选择对象。但是我不确定您的用例。

Answer 2

您可以这样操作：

首先，填写每个产品名称的选择框1（Alpha 1，Alpha 2，Beta）
1. 然后，用Alpha 1中的每个值填充选择框2。
2. 然后将onChange事件附加到选择框1，并清空选择框2，并根据在框1中选择的产品名称，用相应的值重新填充它]

const products = document.querySelector('#products');
const values = document.querySelector('#values');
const myOptions = getData();

myOptions.products.forEach(elem => {
  const child = document.createElement('option');
  child.value = elem.product;
  child.innerHTML = elem.product;
  products.appendChild(child)
});

myOptions.products[0].values.forEach(elem => {
  const child = document.createElement('option');
  child.value = elem;
  child.innerHTML = elem;
  values.appendChild(child)
});

products.addEventListener('change', e => {
  const selected = e.target.value;  
  values.innerHTML = '';
  const selectedVals = myOptions.products.find(item => item.product == selected);
  //console.log("change", e.target.value, selectedVals)

  selectedVals.values.forEach(elem => {
    const child = document.createElement('option');
    child.value = elem;
    child.innerHTML = elem;
    values.appendChild(child)
  });
  
})

function getData(){
  return {
    "products": [
      {
        "product": "Alpha 1",
        "values": [
          "10",
          "20",
          "30",
          "40",
          "50"
        ]
      },
      {
        "product": "Alpha 2",
        "values": [
          "20",
          "30",
          "40",
        ]
      },
      {
        "product": "Beta",
        "values": [
          "30",
          "80",
          "60"
        ]
      }
    ]
  }
}

<select name="products" id="products">
</select>

<select name="values" id="values">
</select>