Как проверить, выбрал ли пользователь свойство в <select>и добавить его в поисковый запрос? - PullRequest
Новая
       13

Как проверить, выбрал ли пользователь свойство в <select>и добавить его в поисковый запрос?

1 голос
/ 30 сентября 2019

Я получаю данные JSON из API погоды. В настоящее время мой код получает название города из 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);
    }
  })
})

Ответы [ 3 ]

0 голосов
/ 30 сентября 2019

Попробуйте использовать свойство onchange или событие изменения в jquery 

<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;
}
0 голосов
/ 30 сентября 2019

Я думаю, вы искали это 

$.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>
0 голосов
/ 30 сентября 2019

Обновлено

Извините за мой последний ответ, который я отправил вслепую без тестирования. Также без объяснения причин. Спасибо комментаторам.

При связывании опций с использованием 

for (index in countryCodes) {
   select.options[select.options.length] = new Option(countryCodes[index], index);
}

Вы будете получать "AF", "AX", "AL" .... и так далее в вашем раскрывающемся списке. В результате, например, «AF» будет значением элемента, а соответствующий «Афганистан» - текстом для элемента select.

Итак, вот что @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);
  });
});
...