0

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

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

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

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

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

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

4

4 回答 4

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

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

$("#country").change(function(){
    //do an ajax request, and update #cities
});
于 2012-08-06T10:55:29.287 回答
0

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

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

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

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

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

于 2012-08-06T10:55:42.563 回答
0

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

于 2012-08-06T10:55:54.513 回答