html形式的下拉列表

drop down list in html form

本文关键字：下拉列表 html      更新时间：2023-09-26

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

第一个名为"country"的列表中有一个国家列表。

第二个列表是当选择一个国家时应该动态填充的"城市"。

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

实现这一点的最简单方法是javascript、jquery还是ajax？

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

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

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

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

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

在makeCitiySelect（）函数中，您可以通过document.getElementsById（"countries"）.value读取此select的值，并发送创建包含该国家/地区城市的新select框。

如果你所在国家的城市在服务器上的数据库中，你必须发送一个ajax请求并获得城市作为响应。。

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

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

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