使用openweathermap显示天气数据

时间:2013-11-26 20:56:01

标签: javascript jquery html weather-api openweathermap

我使用openweathermap为我的网站构建了一个天气小部件。 JS& HTML是 -
JS - >

    $(function() {

        $('.weather-temperature').openWeather({
            city: 'Dhaka, BD',
            descriptionTarget: '.weather-description',
            windSpeedTarget: '.weather-wind-speed',
            minTemperatureTarget: '.weather-min-temperature',
            maxTemperatureTarget: '.weather-max-temperature',
            humidityTarget: '.weather-humidity',
            sunriseTarget: '.weather-sunrise',
            sunsetTarget: '.weather-sunset',
            placeTarget: '.weather-place',
            iconTarget: '.weather-icon',
            customIcons: 'images/icons/weather/',
            success: function() {

                //show weather
                $('.weather-wrapper').show();

            },
            error: function(message) {

                console.log(message);

            }
        });

    }); 

HTML - > / *

                                    <div class="weather-wrapper hide">
                <select id='list'>
                        <option value='1'>Dhaka</option>
                        <option value='2'>Pabna</option>
                </select>

                <img src="" class="weather-icon" alt="Weather Icon" />

                <p><strong>Place</strong>
                <br /><span class="weather-place"></span></p>

                <p><strong>Temperature</strong>
                <br /><span class="weather-temperature"></span> (<span class="weather-min-temperature"></span> - <span class="weather-max-temperature"></span>)</p>

                <p><strong>Description</strong>
                <br /><span class="weather-description capitalize"></span></p>

                <p><strong>Humidity</strong>
                <br /><span class="weather-humidity"></span></p>

                <p><strong>Wind speed</strong>
                <br /><span class="weather-wind-speed"></span></p>

                <p><strong>Sunrise</strong>
                <br /><span class="weather-sunrise"></span></p>

                <p><strong>Sunset</strong>
                <br /><span class="weather-sunset"></span></p>

            </div>      */

//

没有任何'选择'选项,它适用于'达卡'城市。我想使用选择选项更改城市名称并显示更改的天气数据。如何使用jquery.change()。 Plz帮助我。

1 个答案:

答案 0 :(得分:0)

试试这个: HTML

<select id='list'>
                    <option value='Dhaka'>Dhaka</option>
                    <option value='Pabna'>Pabna</option>
            </select>

JS

 var loc;
 $('#list').change(function() {
 loc = $('#list').val();
   $('.weather-temperature').openWeather({
    city: "' + loc + '",
    //etc.