jQuery ajax+PHP实现的级联下拉列表框功能示例

本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能。分享给大家供大家参考，具体如下： 一 代码 fun.js： // JavaScript Document $(document).ready( function(){ $.get(returnpc.php?flag=p, null, function(data){ //向服务器发送GET请求，获取省份的值，并将结果追加到省份下拉列表中 $(#p).append(data); }); $(#c).css(display,none); //初始状态使城市下拉列表不可见 $(#p).cha 在本文中，我们将探讨如何使用jQuery AJAX和PHP来实现级联下拉列表的功能。这个功能常见于各种在线表单，特别是在需要用户选择地理位置时，如省份和城市。级联下拉列表允许用户先选择一个上级选项（如省份），然后根据所选的上级选项动态加载下级选项（如城市）。 我们来看JavaScript部分，这部分主要负责处理用户交互和与服务器通信。代码中的`fun.js`文件包含了以下关键点： 1. `$(document).ready(function(){...})`：这是一个jQuery事件，确保在DOM加载完成后执行内部的代码，确保所有元素都已准备好进行操作。 2. `$.get()`：这是jQuery的AJAX方法，用于发送GET请求到服务器。在这里，它用于从`returnpc.php`获取省份数据，并将这些数据追加到ID为`p`的省份下拉列表中。 3. `$("#c").css("display","none")`：隐藏ID为`c`的城市下拉列表，初始状态下不显示。 4. `$("#p").change(function(){...})`：监听省份下拉列表的`change`事件。当用户更改省份选择时，此事件触发。 5. `$.get()`再次调用，这次根据省份的选择（`$("#p").val()`）向服务器发送GET请求，获取相应城市的列表，并更新城市下拉列表（ID为`c`）。 在PHP部分，`pc.php`文件包含两组数组，分别代表省份和城市。当AJAX请求到达时，服务器根据请求参数返回相应的数据。例如，如果请求参数`flag`是`p`，则返回省份列表；如果是`c`，并且有额外的`p`参数（表示省份），则返回对应省份的城市列表。 HTML部分的`index.php`文件包含两个下拉列表，一个用于省份（ID为`p`），另一个用于城市（ID为`c`）。页面加载时，省份下拉列表已填充数据，而城市下拉列表则在用户选择省份后动态填充。 这个级联下拉列表功能的实现原理是： 1. 用户打开页面时，JavaScript通过AJAX从服务器获取省份数据并填充省份下拉列表。 2. 当用户在省份下拉列表中做出选择时，JavaScript监听到`change`事件，触发新的AJAX请求。 3. 这个请求携带选定的省份信息到服务器，服务器根据省份返回对应的城市列表。 4. JavaScript接收到响应后，清空城市下拉列表并填充新的城市数据，同时显示城市下拉列表。 这种技术可以扩展到更多级别的级联选择，例如区县、街道等，只需要在PHP端添加更多层级的数据结构，并在JavaScript中相应地修改AJAX请求和处理逻辑即可。