以html格式下拉列表

Question

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

第一个名为＆＃34; country＆＃34;有一个国家列表。

第二个列表是＆＃34;城市＆＃34;选择国家/地区时应动态填充。

我应该如何动态实现这个？

这是实现此目的最简单，最简单的方法 在javascript或jquery或ajax？

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

Answer 1

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

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

Answer 2

您可以使用纯JavaScript执行此操作。 在第一个选择中实现onchange属性：

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

并且在makeCitiySelect（）函数中，您可以使用document.getElementsById（“countries”）。value来读取此select的值，并使用此国家/地区的城市发送新的选择框。

如果您所在国家/地区的城市位于服务器上的数据库中，您必须发送ajax请求并将城市作为回复...

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

Answer 3

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

Answer 4

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