添加可能性 select 城市代码

Question

我想通过添加到此脚本的选择框来选择城市：

js:

$(document).ready(function() {
        var example = $("#example").flatWeatherPlugin({
          location: "london", //city and region *required   
        });

    });

jsfiddle

Answer 1

由于该插件是专有的，您应该询问开发者如何更新位置。可能有一个函数可以进行更改，然后您可以获取新数据。

总是可以删除包含插件的容器并在位置更改时附加它，但它不是所谓的 "a good practice"。

这是一个工作演示，但仍然与开发人员交谈，应该有一种方法可以在不删除 HTML 元素的情况下实现它。

$(document).ready(function($) {
 var example = $("#example").flatWeatherPlugin({
  location: "london", //city and region *required  
 });
 $('#list').on('change', function(){
            var location = $(this).val();
            //remove the previous instance of the element holding the weather plugin
            $("#example").remove();
            //Recreate the element and append it to the holder
            $("#holder").append('<div id="example"></div>');
            $("#example").flatWeatherPlugin({
                location: location, //city and region *required  
            });
            $("#example").flatWeatherPlugin('fetchWeather');
 });
});

   /* style the container however you please */
   #example {
    color:#fff; 
    background: #e74c3c;
    padding: 5px;
    margin: 30px auto;
    width: 270px;
    border-radius: 5px;
   }

   /* styling for this page only, ignore */
   body {background: #95a5a6; font-family: b yekan,sans-serif; background: #ecf0f1; padding: 0; margin: 0;}

<link href="http://www.evanstoneworks.com/scripts/flatWeatherPlugin.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.evanstoneworks.com/scripts/jquery.flatWeatherPlugin.min.js"></script>
<div id="holder">
    <div id="example"></div>
</div>
<select id="list">
    <option value="london">london</option>
    <option value="tokyo">tokyo</option>
    <option value="paris">paris</option>
</select>

希望对您有所帮助

添加可能性 select 城市代码

Add the possibility to select the city code

jquery

weather

drop-down-menu