Question

所以我有一个问题，我有这个脚本和dropdwon列表，但我不知道如何将值从下拉列表传递到位置？所以我在开始时有固定的位置但是当用户从下拉列表中检查另一个时，它需要改变天气温度和城市。 http://codepen.io/anon/pen/GoNXGq在这里你可以看到我想要做什么...当用户点击城市我得到下拉列表但我怎样才能将值从dropdow传递到位置？

$(document).ready(function() {
  loadWeather('Sarajevo'); //@params location,
});

function loadWeather(location) {
  $.simpleWeather({
    location: location,
    woeid: '',
    unit: 'c',

     success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i></h2>';
      html += '<div class="dropdown"><button style="background-color:transparent;border:none;" class="dropdown-toggle" type="button" data-toggle="dropdown"><span>' +weather.city+'</span><span style="color:white;margin-left:15px;margin-top:40px;" class="fa fa-angle-down"></span></button><ul class="dropdown-menu" style="left:180px;"><li><a href="#">Zagreb </a></li><li><a href="#">Beograd </a></li></ul></div>';

      html += '<ul><li style="color:white;">'+weather.temp+'&deg;'+weather.units.temp+'</li>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
    $('#js-geolocation').click(function() {
     var city = $("#city123").val();

    if(city!="")
       loadWeather(city)
});
}

Answer 1

一种方法是使用'data'属性并设置点击处理程序

JS

$(document).on('click', 'a.weather-link', function (e) {
  var city = $(this).data('city');
  loadWeather(city);
  e.preventDefault();
});

HTML

<ul class="dropdown-menu" style="left:180px;">
  <li><a class="weather-link" href="#" data-city="Zagreb">Zagreb</a>
  </li>
  <li><a class="weather-link" href="#" data-city="Beograd">Beograd</a>
  </li>
</ul>

如何从simpleWeather.js中的下拉菜单中选择城市？

1 个答案: