时间戳

首页 > 解决方案 > 我对使用 javascript 将城市列表加载到下拉列表中有些困惑

javascript - 我对使用 javascript 将城市列表加载到下拉列表中有些困惑

问题描述

我正在尝试创建一个简单的天气应用程序，该应用程序询问国家和城市，然后显示所选城市的天气。

我遇到了第一个障碍，因为我无法让城市加载。我正在尝试从包含城市列表的 html 文件中加载城市列表（我有四个不同的 html 文件，其中包含英格兰/苏格兰/威尔士/北爱尔兰的城市）。我可以选择国家，但无法加载城市列表。任何建议将不胜感激。

这是 javascript（与我当前的障碍唯一相关的是前 3 行：

$(document).ready(function() {
  $('#countries').change(function() {
    $('#cities').load($(this).val() + '.html');
  });
  $('#cities').change(function() {
    var cityWeather = $(this).val();
    var city = $('#cities option:selected').text();
    var apiUrl = 'https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=798c9a98f7fc15df80c7e21268f57941'
    cities = '' + cityWeather

    $.ajax({
      url: apiUrl,
      type: 'GET'
      dataType: 'json'
      success: function(response) {
        console.log(JSON.stringify(response));
      }
      error: function() {

      }
    });
  });
});

这是供参考的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="apiweather.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>Weather App</h1> 
    </header>
    <section>
        <select id = "countries">
            <option selected>Select a Country</option>
            <option value="england-cities">England</option>
            <option value="scotland-cities">Scotland</option>
            <option value="wales-cities">Wales</option>
            <option value="nireland-cities">Northern Ireland</option>
        </select>

        <select id = "cities">
            <option selected><< Please Select</option>
        </select>
        <div id = "info"><div>

    </section>
    <footer>
    </footer>
</body>
</html>

最后这是我正在处理的 html 列表的示例：

<option>Select a City</option>
<option>Aberdeen</option>    
<option>Dundee</option>      
<option>Edinburgh</option> 
<option>Glasgow</option>     
<option>Inverness</option>

非常感谢任何建议或资源！

标签： javascripthtmldrop-down-menu

解决方案

推荐阅读