title: showing weather data of different cities using openweathermap
body: <p>I have built a weather widget for my website using openweathermap. JS &amp; html is --
  Script in main.html page--></p>
  
  <pre><code>$(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);
  
          }
      });
  
  }); 
  </code></pre>
  
  <p>HTML -->/*</p>
  
  <pre><code>                                &lt;div class="weather-wrapper hide"&gt;
              &lt;select id='list'&gt;
                      &lt;option value='Dhaka,BD'&gt;Dhaka&lt;/option&gt;
                      &lt;option value='Pabna,BD'&gt;Pabna&lt;/option&gt;
              &lt;/select&gt;
  
              &lt;img src="" class="weather-icon" alt="Weather Icon" /&gt;
  
              &lt;p&gt;&lt;strong&gt;Place&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-place"&gt;&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;&lt;strong&gt;Temperature&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-temperature"&gt;&lt;/span&gt; (&lt;span class="weather-min-temperature"&gt;&lt;/span&gt; - &lt;span class="weather-max-temperature"&gt;&lt;/span&gt;)&lt;/p&gt;
  
              &lt;p&gt;&lt;strong&gt;Description&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-description capitalize"&gt;&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;&lt;strong&gt;Humidity&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-humidity"&gt;&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;&lt;strong&gt;Wind speed&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-wind-speed"&gt;&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;&lt;strong&gt;Sunrise&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-sunrise"&gt;&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;&lt;strong&gt;Sunset&lt;/strong&gt;
              &lt;br /&gt;&lt;span class="weather-sunset"&gt;&lt;/span&gt;&lt;/p&gt;
  
          &lt;/div&gt;      */
  </code></pre>
  
  <p>Without any 'select' option it working properly for 'Dhaka' city. I want to change city name using select option and show changed weather data.I have tried ------</p>
  
  <pre><code>     /*
        var loc;
           $('#list').change(function() {
           loc = $('#list').val();
           $('.weather-temperature').openWeather({
             city: "' + loc + '",
              //etc.
        */
  </code></pre>
  
  <p>Here is openweather.js code -----</p>
  
  <pre><code>    /*
        ;(function($) {
  
  $.fn.openWeather  = function(options) {
  
      //return if no element was bound
      //so chained events can continue
      if(!this.length) { 
          return this; 
      }
  
      //define default parameters
      var defaults = {
          descriptionTarget: null,
          maxTemperatureTarget: null,
          minTemperatureTarget: null,
          windSpeedTarget: null,
          humidityTarget: null,
          sunriseTarget: null,
          sunsetTarget: null,
          placeTarget: null,
          iconTarget: null,
          customIcons: null,
          units: 'c',
          city: null,
          lat: null,
          lng: null,
          key: null,
          success: function() {},
          error: function(message) {} 
      }
  
      //define plugin
      var plugin = this;
  
      //define element
      var el = $(this);
  
      //api URL
      var apiURL;
  
      //define settings
      plugin.settings = {}
  
      //merge defaults and options
      plugin.settings = $.extend({}, defaults, options);
  
      //if city isn't null
      if(plugin.settings.city != null) {
  
         //define API url using city (and remove any spaces in city)
         apiURL = 'http://api.openweathermap.org/data/2.5/weather?q='+plugin.settings.city.replace('', '');
  
      } else if(plugin.settings.lat != null &amp;&amp; plugin.settings.lng != null) {
  
         //define API url using lat and lng
         apiURL = 'http://api.openweathermap.org/data/2.5/weather?lat='+plugin.settings.lat+'&amp;lon='+plugin.settings.lng;
      }
  
      if(plugin.settings.key != null) {
  
          apiURL += '&amp;APPID=' + plugin.settings.key;
  
      }
  
   etc....
    */
  </code></pre>
  
  <p>I am really sorry for this long writing. This problem is burning me badly and i am not pro coder. So plz help me to get out from this problem.</p>