实现静态 html 页面的国家 - 州 - 城市选择答案

【问题标题】：Implementing country - state - city selection for a static html page实现静态 html 页面的国家 - 州 - 城市选择
【发布时间】：2018-06-11 21:10:51
【问题描述】：

我们运行一个静态网站

网站表单提交连接到处理表单数据的服务，然后转发到另一个服务来处理数据和处理请求。我们注意到国家-州-城市的选择需要统一，以便更好地处理数据。存在这样的列表，例如：https://dev.maxmind.com/geoip/geoip2/geolite2/

这意味着没有非唯一值，例如如果您给用户一个文本输入，他会在“伦敦”或“我来自伦敦”一次写“伦敦”。

因此，一个列表对于用户输入具有唯一值。

这对于动态网站来说没问题，我加载国家数据，然后在选择国家时，我提供可用的州，如果通过，我提供城市。问题是，这个网站是静态的，例如html.

因此，要获得类似的体验，需要将整个国家/地区列表数据库发送给客户端，这太过分了，大约 10 MB。

【问题讨论】：

那么，问题是什么？如何在不加载 10MB 数据的情况下做到这一点？

标签： html country countries

【解决方案1】：

您可以创建一个页面，其中包含所有 50 个状态的列表作为超链接。每个州都会链接到该州每个城市的页面。这样，您将拥有 10 MB 的网页，而不是发送 10 MB 的数据，用户将选择他们需要的网页。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul>
        <li><a href = "/html/Alabam/Cities.html"> Alabama </a></li>
         <li>Alaska</li>
         <li>Arizona</li>
         <li>Arkansas</li>
        <li>etc</li>
      </ul>
   </body>

</html>

上面的代码应该可以工作。每个列表项都是一个超链接，但您需要将相关文件放在 href 中。

【讨论】：