Mastering jQuery UI

Creating a weather widget

For the weather widget, first we will create the dropdown with names of cities, then we will add the event handler for its change event. Write the following code inside the setupWeather method to create a dropdown and binding event handler:

var cities = ['Delhi, India', 'London,UK', 'New York,USA', 'Tokyo,Japan'];
var strCity = '<option value="0">select a city</option>';
$(cities).each(function(i, item)
{
  strCity+= '<option value="' + item + '">' + item + '</option>';
});
$('#selCity').html(strCity);

$('#selCity').change(function()
{
  var selection = $(this).val();
  if(selection == 0)
  {
    return;
  }
  dashboard.displayWeather(selection);
  
});

To create a cities dropdown, we created an array called cities that contains some city ...