jquery和ajax实现省市区三级联动封装和不封装两种方式

来源：动视网责编：小OO 时间：2020-11-27 20:06:41

jquery和ajax实现省市区三级联动封装和不封装两种方式

首先，要实现如下图效果。1、要理清思路。先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。2、用到的数据库表：Chinastates表。规律：根据国家级（中国）的areacode查询省级(如：北京)；根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）。第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。代码如下：

推荐度：

点击下载本文 文档为doc格式

导读首先，要实现如下图效果。1、要理清思路。先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。2、用到的数据库表：Chinastates表。规律：根据国家级（中国）的areacode查询省级(如：北京)；根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）。第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。代码如下：

本文主要为大家详细介绍了jquery+ajax实现省市区三级联动的相关代码，包括封装和不封装两种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

首先，要实现如下图效果，

1、要理清思路：

先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。

2、用到的数据库表：Chinastates表

规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）

第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../jquery-1.11.2.min.js"></script>
 </head>
 <body>
 <select id="sheng"></select>
 <select id="shi"></select>
 <select id="qu"></select>
 </body>
</html>
<script type="text/javascript"> 
 $(document).ready(function(e){ 
 //

输出省 var code = "0001"; $.ajax({ async:false, //取消异步 url:"chuli.php", data:{code:code}, type:"POST", dataType:"TEXT", success:function(data){ var hang = data.trim().split("|"); //trim()去空格 var str=""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#sheng").html(str); } }); //输出市 $("#sheng").click(function(){ var code2=$("#sheng").val(); $.ajax({ async:false, url:"chuli.php", data:{code:code2}, type:"POST", dataType:"TEXT", success:function(data2){ var hang2 = data2.trim().split("|"); var str2 =""; for(var i=0;i<hang2.length;i++) { var lie2=hang2[i].split("^"); str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>"; } $("#shi").html(str2); } }); }) //输出区县 $("#shi").click(function(){ var code3=$("#shi").val(); $.ajax({ async:false, url:"chuli.php", data:{code:code3}, type:"POST", dataType:"TEXT", success:function(data3){ var hang3 = data3.split("|"); var str3 =""; for(var i=0;i<hang3.length;i++) { var lie3=hang3[i].split("^"); str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>"; } $("#qu").html(str3); } }); }) }) </script>　　

期间出现的问题：每个下拉列表的第一个数据输不出来：是因为每个下拉列表的第一个数据的value值都带有空格！！！所以在输出data时要去空格！！！

data返回的值可能带有空格换行等，所以要用trim()方法去空格！！！

第二种方式：封装成插件，以后可以随时调用（重要）

（1）主页面：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title><br>//引入jquery包
 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
 <script src="sanji.js"></script>
 </head>
 <body><br>//id要与封装的js插件中一致
 <p id="sanji"></p>
 </body>
</html>

（2）我们自己封装的js插件

其次就是处理页面(两种方法都用到的)：chuli.php

<?php
$code=$_POST["code"];
require "DB.class.php";
$db=new DB();
$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";
$str=$db->strquery($sql);
echo $str;

最后就是封装的类文件：DB.class.php

jquery和ajax实现省市区三级联动封装和不封装两种方式

推荐度：

点击下载本文 文档为doc格式

标签：封装省市区 ajax

热门焦点

jquery和ajax实现省市区三级联动封装和不封装两种方式

jquery和ajax实现省市区三级联动封装和不封装两种方式

jquery和ajax实现省市区三级联动封装和不封装两种方式

最新推荐

猜你喜欢

热门推荐