jQueryajax实现省市县三级联动资源-CSDN文库

112 浏览量 2020-10-20 05:03:04 上传评论收藏 54KB PDF 举报

【jQuery AJAX 实现省市县三级联动】在网页开发中，经常需要实现省市县（或其它类似层次结构）的联动选择效果，以便用户在选择某一区域时，下一级的区域列表能够自动更新。jQuery 和 AJAX 技术可以帮助我们轻松地完成这一功能。下面将详细介绍如何使用 jQuery 和 AJAX 实现省市县三级联动。 ### 1. 数据库设计我们需要一个包含省、市、县（区）信息的数据库表。通常，这个表会有以下字段：`id`（唯一标识）、`parent_id`（上级区域ID）、`name`（区域名称）等。例如： ``` CREATE TABLE `regions` ( `id` int(11) NOT NULL AUTO_INCREMENT, `parent_id` int(11) DEFAULT NULL, `name` varchar(50) NOT NULL, PRIMARY KEY (`id`), KEY `parent_id` (`parent_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` ### 2. 主页面HTML结构创建一个HTML页面，引入jQuery库和自定义的JavaScript文件。在这个例子中，我们使用`sanji.php`作为主页面，并且在`<body>`标签内创建一个`<div>`用于展示下拉列表。 ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.min.js"></script> <script src="sanjiliandong.js"></script> </head> <body> <div id="sanjiliandong">  </div> </body> </html> ``` ### 3. JavaScript 封装方法在`sanjiliandong.js`文件中，我们将编写用于填充省市县下拉列表的函数。这里我们有三个函数：`FillSheng()`（填充省份），`FillShi()`（填充城市）和`FillQu()`（填充区县）。 ```javascript $(document).ready(function(e){ var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; $("#sanjiliandong").html(str); FillSheng(); FillShi(); FillQu(); $("#sheng").change(function(){ FillShi(); FillQu(); }); $("#shi").change(function(){ FillQu(); }); }); // 填充省份的方法 function FillSheng(){ var pcode = "0001"; $.ajax({ async: false, url: "chuli.php", data: {pcode: pcode}, type: "POST", dataType: "TEXT", success: function(data){ var hang = data.split("|"); var str = "<option value='' >请选择地区</option>"; for(var i=0; i<hang.length; i++){ var lie = hang[i].split("^"); str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#sheng").html(str); } }); } // 填充城市的方法 function FillShi(){ var pcode = $("#sheng").val(); $.ajax({ async: false, url: "chuli.php", data: {pcode: pcode}, type: "POST", dataType: "TEXT", success: function(data){ var hang = data.split("|"); var str = "<option value='' >请选择地区</option>"; for(var i=0; i<hang.length; i++){ var lie = hang[i].split("^"); str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } // 填充区县的方法 function FillQu(){ var pcode = $("#shi").val(); $.ajax({ async: false, url: "chuli.php", data: {pcode: pcode}, type: "POST", dataType: "TEXT", success: function(data){ var hang = data.split("|"); var str = "<option value='' >请选择地区</option>"; for(var i=0; i<hang.length; i++){ var lie = hang[i].split("^"); str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); } ``` ### 4. PHP 处理页面创建一个名为`chuli.php`的PHP页面，它接收AJAX请求并返回相应的区域数据。这个页面根据传入的`pcode`（父级区域ID）查询数据库，然后以特定格式返回结果。 ```php <?php // 连接数据库 $pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'username', 'password'); // 获取父级区域ID $pcode = $_POST['pcode']; // 查询子级区域 $stmt = $pdo->prepare("SELECT * FROM regions WHERE parent_id = :pcode"); $stmt->bindParam(':pcode', $pcode); $stmt->execute(); $results = $stmt->fetchAll(PDO::FETCH_ASSOC); // 将结果转化为字符串，用"^"分隔列，用"|"分隔行 $data = ""; foreach ($results as $row) { $data .= $row['id'] . "^" . $row['name'] . "|"; } $data = rtrim($data, '|'); // 去除最后一个| echo $data; ?> ``` ### 总结通过以上步骤，我们成功实现了使用jQuery和AJAX的省市县三级联动效果。当用户在省或市下拉框中做出选择时，相应的市或县下拉框会自动更新，显示符合条件的区域列表。这种功能对于用户输入地址或者进行区域筛选时非常有用。在实际项目中，你可能需要根据自己的数据库结构和需求对代码进行调整。

资源推荐

资源详情

资源评论