javascript - html形式的下拉列表

Question

考虑一个 html 表单中有两个下拉列表。

第一个名为“国家”的列表包含国家/地区列表。

第二个列表是选择国家时应动态填充的“城市”。

我应该如何动态地实现它？

在 javascript 或 jquery 或 ajax 中实现这一点的最简单和最简单的方法是什么？

请帮助提供示例代码和想法，以便我能够实现它或一些外部链接或教程

score 0 · Accepted Answer

在您的国家/地区下拉列表中应用 onchange 事件 (http://api.jquery.com/change/)
向服务器发送ajax请求并获取城市列表（http://api.jquery.com/jQuery.ajax/）
ajax 请求成功后，填充第二个列表“城市”。请记住从城市列表中删除任何已居住的城市。
将您从服务器获得的所有城市列表存储到一个数组中。下次用户选择同一个国家时，使用数组中存储的数据显示城市列表。这样您就不必为同一个国家/地区发出多个 ajax 请求。

score 0 · Accepted Answer

使用jQuery，使用第一个下拉的change事件，然后更新第二个，有点像这样

$("#country").change(function(){
    //do an ajax request, and update #cities
});

score 0 · Accepted Answer

你可以用纯 JavaScript 做到这一点。在第一个选择中实现 onchange 属性：

<select id="countires" onchange="makeCitiySelect( );"> .. </select

在 makeCitiySelect( ) 函数中，您可以使用 document.getElementsById( "countries" ).value 读取此选择的值，然后发送使用该国家/地区的城市创建新的选择框。

如果您所在国家/地区的城市在服务器上的数据库中，您必须发送 ajax 请求并获取城市作为响应。

但可以肯定的是，使用 jQuery 你可以更好地解决这个问题

score 0 · Accepted Answer

1.- 创建 2 个选择框 2.- 在第一个选择上创建一个onchange js 或 jquery 函数，因此每次选择其他选择时都会更改 3.- 在onchange函数内部对具有所选选项的相应内容。4.- 检索数据并用相应的数据重建第二个选择框。

4 回答 4