html格式的下拉列表

Question

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

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

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

我应该如何动态地实现这一点？

用javascript、jquery或ajax实现这一点，哪种方法是最简单、最简单的？

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

Answer 1

使用jQuery，使用第一个下拉菜单的change事件，然后更新第二个下拉菜单，如下所示

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

Answer 2

您可以使用纯JavaScript来实现这一点。在第一个select中实现onchange属性：

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

在makeCitiySelect( )函数中，您可以使用document.getElementsById( "countries“).value来读取这个select的值，并使用这个国家的城市创建新的选择框。

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

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

Answer 3

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