将 select 选项的值设置为 select JSON 数据

Question

我正在创建一个基于 JSON 的 select，我使用 API。 基于该 select，当我选择另一个选项时，我希望更改一些数据（文本和图像 src）。

我得到了 select 并完成了选项。 每个选项都是一个名称，我使用 forEach 完成了它。 我的问题是设置值，以便我可以使用它来更改其他数据。 在我看来，最简单的解决方案是将值设置为对象索引，因此当我选择第一个选项时，我得到 0 并且可以获得第一个 JSON object。 我不确定这是否是最好的方法。

这是我的代码减少到只有 forEach：

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

  data_json.show.forEach((element) => {
    document.getElementById('selector').innerHTML +=
    `<option value="">${element.name}</option>`;
  });

（这个值就是我想和每个json数据的索引一样）

我对我想要得到的东西的想法：

  <select name="select" id="selector">
    <option value="0">Name_01</option>
    <option value="1">Name_02</option>
    <option value="2">Name_03</option>
  </select>

所以我可以使用这样的值：

  let titulos = document.getElementById("titulos");

  selectVal.onchange = function() {
        let actualVal = selectVal.options[selectVal.selectedIndex].value;
        titulos.innerHTML = "Títulos:" + " " + data_json.show[actualVal].image;;
    };

  <p id="titulos">Títulos:</p>

希望有意义

Answer 1

您将它们全部设置为空值。 您可以使用数组索引为它们各自赋予不同的值。

  data_json.show.forEach((element, index) => {
    document.getElementById('selector').innerHTML +=
    `<option value="${index+1}">${element.name}</option>`;
  });

顺便说一句，您可以将selectVal.options[selectVal.selectedIndex].value简化为selectVal.value 。