Javascript 更改“选择值”下拉列表时更新输出显示的json数据

我基本上希望根据我在下拉列表中选择的值动态更新显示的输出json字段，而无需重新加载页面。在这种情况下，根据选定的AveragePrice下拉列表显示城市。顺便说一下，它是纯javascript（香草）

JSON:

HTML:

---

如您所见，我正在为不同的ID字段定义变量名。在IF条件下，我正在更新与AveragePrice匹配的城市文本内容（innerHTML）。如果我更改HTML中的默认下拉列表值并重新加载页面，它将呈现正确的城市。但是更改页面上的下拉列表，它不会更新城市。我尝试将onchange eventlistener添加到下拉列表中，但没有成功。

问题在于您没有正确引用数组元素。以下是您希望循环浏览数据并进行比较的方式：

函数选择（）{
var valueDropdown=document.getElementById（“averagePriceDropdown”）；
var valueData=valueDropdown.options[valueDropdown.selectedIndex].value；
变量i，j，匹配；
匹配=假；
对于（i=0；i

-
100
150
175
200
300

非常感谢@crosen9999。因此，所有内容都需要在onchange函数（choose（））中才能更新结果。此外，我不打算使用innerHTML，而是使用textContent。非常感谢！

[
   {
      "country":"UK",
      "cities":[
         {
            "city":"Manchester",
            "averagePrice":100
         },
         {
            "city":"London",
            "averagePrice":300
         },
      ]
   },
  {
      "country":"France",
      "cities":[
         {
            "city":"Toulouse",
            "averagePrice":150
         },
         {
            "city":"Nice",
            "averagePrice":200
         },
      ]
   },
]

<div id="city"></div>
<select id="averagePriceDropdown">
 <option value="100">100</option>
 <option value="150">150</option>
 <option value="175">175</option>
 <option value="200">200</option>
 <option value="300">300</option>
</select>

var valueDropdown = document.getElementById("averagePriceDropdown");
var valueData = valueDropdown.options[valueDropdown.selectedIndex].value;

var getAverage = async function () {
    fetch("../data/data.json").then(
        res => {
            res.json().then(
                data => {
                    for (var x in data) {
                        if (data[x].cities[x].averagePrice == valueData) {
                            return document.getElementById("city").innerHTML += data[x].cities[x].city;
                        } else {
                            return document.getElementById("city").innerHTML += "Could not find city.";
                        }
                    }


                }
            )
        }
    )

};