如何检查用户是否在 <select> 中选择了一个属性并将其添加到搜索查询中？

Question

我正在从天气 API 获取 JSON 数据。目前，我的代码从 html 输入获取城镇名称并查询 API 以获取该特定地点的天气。我为国家/地区代码引入了一个选择元素（因此，如果您想查看美国那不勒斯而不是意大利那不勒斯的天气，则必须在下拉菜单中选择美国代码）。我希望它在启动搜索之前检查是否选择了国家/地区代码，如果是，则将其添加到查询的参数中。

我尝试了一些 if/else 语句但没有成功。国家/地区代码存储在一个对象中并且不是硬编码的。我从不同的 API 获取对象。我已设法将这些代码放入 select 元素中，但现在我需要确保搜索考虑是否选择了不同的国家/地区。

如果用户选择了一个，我希望区域变量包含国家代码

// CODE THAT ADDS WEATHER DATA INTO DOM //

$("#weather-button").click(function() {

  $(".weather-img").html("");

  $(".weather-type").html("");

  $(".weather-temp").html("");

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

  var region = "";

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

    console.log(data);..........................

  });

  // HOW IM GETTING COUNTRY CODE DATA //

  var countryCodes = [];

  $.getJSON("https://restcountries.eu/rest/v2/all", function(countryData) {

    var countryCodes = countryData.reduce((countries, item) => {

      countries[item.name] = item.alpha2Code;

      return countries;

    }, {});

    console.log(countryCodes);

    // HOW IVE ADDED COUNTRY CODE DATA TO THE <SELECT> // 

    var selectBox = $("#country-select");

    var select = document.getElementById("country-select");

    selectBox.append($('<option>', {

      value: -1,

      text: 'Select a Country'

    }));

    for (index in countryCodes) {

      select.options[select.options.length] = new Option(countryCodes[index], index);

    }

  })

})

Answer 1

更新对不起，我的最后一个答案是我在没有测试的情况下盲目发布的。另外，不加解释。感谢评论者。通过绑定选项使用for (index in countryCodes) {&nbsp; &nbsp;select.options[select.options.length] = new Option(countryCodes[index], index);}您将在下拉列表中得到“AF”、“AX”、“AL”……等等。导致例如“AF”作为元素的值和对应的“阿富汗”作为选择元素的文本。所以，这是你真正需要的@Rogozin：$("#weather-button").click(function() {&nbsp; $(".weather-img").html("");&nbsp; $(".weather-type").html("");&nbsp; $(".weather-temp").html("");&nbsp; var city = $("input[name=city-box]").val();&nbsp; var region = "";&nbsp; var selected = document.getElementById("country-select");&nbsp; if (selected.value != -1) {&nbsp; &nbsp; region = selected.value; // if you want value "AF" to send&nbsp; &nbsp; // OR&nbsp;&nbsp;&nbsp; &nbsp; region = selected.options[selected.selectedIndex].text; // if you want "Afghanistan" to send&nbsp; }&nbsp; $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + region + "&units=metric&myapikey", function(data) {&nbsp; &nbsp; console.log(data);&nbsp; });});

Answer 2

尝试在 jquery 上使用onchange属性或更改事件<form>&nbsp; &nbsp;Select Character:&nbsp; &nbsp;<select id="mySelect" onchange="myFunction()">&nbsp; &nbsp; &nbsp;<option value="a">A</option>&nbsp; &nbsp; &nbsp;<option value="b">B</option>&nbsp; &nbsp; &nbsp;<option value="c">C</option>&nbsp; &nbsp; &nbsp;<option value="d">D</option>&nbsp; &nbsp;</select></form><p id="demo"></p>function myFunction() {&nbsp; var x = document.getElementById("mySelect").value;&nbsp; document.getElementById("demo").innerHTML = x;}

Answer 3

我想你在找这个$.getJSON("https://restcountries.eu/rest/v2/all", function(countryData) {&nbsp; var countryCodes = countryData.map(item => `<option value="${item.alpha2Code}">${item.name}</option>`);&nbsp; $("#country-select")&nbsp; &nbsp; .html('<option value="">Country</option>')&nbsp; &nbsp; .append(countryCodes.join(""));})$("#country-select").on("change", function() {&nbsp; console.log(this.value)})$("#weather-button").click(function() {&nbsp; $(".weather-img").html("");&nbsp; $(".weather-type").html("");&nbsp; $(".weather-temp").html("");&nbsp; var city = $("input[name=city-box]").val();&nbsp; var region = $("#country-select").val() || "whatever is default country code";&nbsp; $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + region + "&units=metric&myapikey", function(data) {&nbsp; &nbsp; console.log(data);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="country-select"></select>