javascript - 使用 Open Weather API 时如何利用存储在变量中的国家代码？

Question

我已将国家/地区代码存储在从 https://restcountries.eu/ 获取的变量中(即 GB、美国、新西兰)

我也在使用免费的 Weather API https://openweathermap.org/api获取用户在我的搜索输入中输入的任何城镇的当前天气数据。

一切正常，但我遇到的问题是整合国家代码并将它们链接到复选框，供用户点击并过滤他们对特定城镇的搜索(例如英国和美国都有曼彻斯特，并且默认情况下搜索只会显示 UK 一个)。有没有办法利用变量中存储的国家代码以复选框(或类似的东西)的形式呈现它们供用户选择？我可能需要编写一些 HTML 来显示复选框等，但我不了解如何有效地使用带有存储代码的变量以及在这种情况下该怎么做才是明智的做法。

我创建了一个新变量，其中 GB 代码作为字符串，并让我的 getJSON 将其纳入搜索参数，这与在搜索输入中查询特定城镇的方式相同。这行得通，但我想知道是否有一个优雅的解决方案来解决我的问题，而不是手动编写 20 多个国家/地区代码。我也玩过一些 if 语句(您可以在下面看到)，但我知道这是一些原始/质量较差的代码。

        var city = $("input[name=city-box]").val();
        var region = "";

        if (document.getElementById("GB").checked) {
            region = ",gb";
        }
        if (document.getElementById("USA").checked) {
            region = ",usa";
        }

        $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + region + "&units=metric&APPID=apikey", function(data) {
            console.log(data);.....

这种方法完成了我正在尝试做的事情(尽管效果不佳)，并且它没有利用为我存储在不同变量中的那些国家/地区代码。任何建议表示赞赏!

Answer 1

这是一个简单的例子，展示了一种使用 <select> 的方法元素和 change事件¹:

$(function() {
    var countryCodes = ["GB", "US", "NZ"];
    var cities = ["Manchester", "Birmingham"];

    var countrySelect = $("#country-box");
    var citySelect    = $("#city-box");

    // Add country codes/cities to the <select> elements
    populateSelectElement(countrySelect, countryCodes);
    populateSelectElement(citySelect, cities);

    // Listen for the "change" event on the .weather-select elements
    $(".weather-select").change(function() {
        var countryCode = countrySelect.val();
        var city = citySelect.val();

        // Ensure both a country and city have been selected before making a request
        if (countryCode && city) {
            var apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + city + countryCode + "&units=metric&APPID=apikey";
            console.log("Loading URL: " + apiUrl);
        }
    })

    // Adds <option> elements to an element from an array
    function populateSelectElement(element, values) {
        for (var i = 0; i < values.length; i++) {
            element.append("<option value='" + values[i] + "'>" + values[i] + "</option>");
        }
    }
})

<select id="country-box" class="weather-select">
    <option value="">Select a country</option>
</select>

<select id="city-box" class="weather-select">
    <option value="">Select a city</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

显然这是非常基础的，但应该足以让您了解。

---

¹ https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event