У меня есть две кнопки выбора, содержащие текущие данные о погоде в стране для каждого города. Я пытаюсь сделать так, чтобы отчет исчез, когда пользователь выбирает другой город.
Я пробовал этот код - $('#citiesOfUk').children('select').hide() $('#citiesOfUk').children('#districtsInUk').show();, но он не работал.
Извините, что я не смог заставить вторую кнопку выбора отобразить города в потоке StackOverflow, потому что данные сохранены в разных HTML файлах. Но я надеюсь, что у вас, ребята, есть идея.
Большое спасибо.
$(document).ready(function updateWeatherData() {
$.ajax({
url: 'weather.json',
type: 'GET',
dataType: 'json',
success: function(response) {
var output = '<thead><tr><th>City</th><th>Conditions</th><th>Temperature</th><th>Wind Speed</th><th>Wind Direction</th><th>Wind Chill Factor</th></thead>';
$.each(response.weather, function(index) {
output += '<tr><td>' + response.weather[index].city.cityName + '</td>';
output += '<td>' + response.weather[index].currentConditions + '</td>';
output += '<td>' + response.weather[index].temperature + '°c</td>';
output += '<td>' + response.weather[index].wind.windSpeed + 'mph</td>';
output += '<td>' + response.weather[index].wind.windDirection + '</td>';
output += '<td>' + response.weather[index].wind.windChillFactor + '</td></tr>';
});
document.getElementById('county').innerHTML = output;
setTimeout(updateWeatherData, 5000);
document.getElementById('info').innerHTML = ''; //clear error message.
},
error: function() {
$('#info').html('<p>An error has occurred</p>'); //show error message
document.getElementById('county').innerHTML = ''; //clears the table
setTimeout(updateWeatherData, 2000); //wait for 5sec and load data.
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="apiweather.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="wrapper">
<header>
<div>
<h1></h1>
<h4>Choose The Weather</h4>
</div>
</header>
<div id="container">
<select id="country">
<option selected>choose the country</option>
<option>United States</option>
<option>England</option>
<option>Canada</option>
<option>Australia</option>
</select>
<select id="county">
<option selected>Please Select the city</option>
</select>
<div id="weatherForescast"></div>
<div id="countyNames"></div>
<div id="info"></div>
</div>
<footer>
</footer>
</body>
</html>