Сделать отчет исчезнет, ​​когда один начинает выбирать другой город - PullRequest
0 голосов
/ 19 апреля 2020

У меня есть две кнопки выбора, содержащие текущие данные о погоде в стране для каждого города. Я пытаюсь сделать так, чтобы отчет исчез, когда пользователь выбирает другой город.

Я пробовал этот код - $('#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 + '&deg;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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...