如何检查用户是否在 <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) {

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

}

您将在下拉列表中得到“AF”、“AX”、“AL”……等等。导致例如“AF”作为元素的值和对应的“阿富汗”作为选择元素的文本。

所以，这是你真正需要的@Rogozin：

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

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

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

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

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

  var region = "";

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

  if (selected.value != -1) {

    region = selected.value; // if you want value "AF" to send

    // OR  

    region = selected.options[selected.selectedIndex].text; // if you want "Afghanistan" to send

  }

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

    console.log(data);

  });

});

Answer 2

尝试在 jquery 上使用onchange属性或更改事件

<form>

   Select Character:

   <select id="mySelect" onchange="myFunction()">

     <option value="a">A</option>

     <option value="b">B</option>

     <option value="c">C</option>

     <option value="d">D</option>

   </select>

</form>

<p id="demo"></p>

function myFunction() {

  var x = document.getElementById("mySelect").value;

  document.getElementById("demo").innerHTML = x;

}

Answer 3

我想你在找这个

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

  var countryCodes = countryData.map(item => `<option value="${item.alpha2Code}">${item.name}</option>`);

  $("#country-select")

    .html('<option value="">Country</option>')

    .append(countryCodes.join(""));

})

$("#country-select").on("change", function() {

  console.log(this.value)

})

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

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

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

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

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

  var region = $("#country-select").val() || "whatever is default country code";

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

    console.log(data);

  });

});

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

<select id="country-select"></select>