码迷,mamicode.com
首页 > Web开发 > 详细

ajax三级联动

时间:2016-05-20 22:17:30      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

不得不说的trim(),我的机器写出来的文件接收data时一定要去除空格…没有去写有参数的方法,因为找错就费了大量的时间,所以相对别人而言trim()于我可能真真的就此记住了

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>//加载jquery包
<script src="sanji.js"></script>//加载js文件,jquery记得放在最前面就行
</head>

<body>
<div id="sanji"></div>
</body>

</html>

jquery代码

// JavaScript Document
$(document).ready(function(e) {
    $("#sanji").html("<select id=‘sheng‘></select> <select id=‘shi‘></select> <select id=‘qu‘></select>");//三个下拉
    //填充内容
    //1.填充省
    FillSheng();//调用三个方法
    FillShi();
    FillQu();
    $("#sheng").change(function(){  //调用jquery自有的change方法,省份改变时相应的市、区也发生改变
        //改变市,重新填充市
        FillShi();
        //改变区,重新填充区
        FillQu();
        
        })
    //如果市选中变化的时候就去填充区
    $("#shi").change(function(){//依旧是调用change方法,市改变时相应的区也会发生改变
        
        
        //改变区,重新填充区
        FillQu();
        
        })
    

    
    function FillSheng()//省的方法
    {
        var pcode="0001";//默认0001
        //调用ajax
        $.ajax({
            async:false,//同步
            url:"chuli.php",//从哪个页面获取data
            data:{pcode:pcode},
            type:"POST",//post传值
            dataType:"TEXT",
            success: function(data){
                var str="";
                var hang=data.trim().split("|");  //去除空格,将接收的data用字符"|"拆分               
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split("^");//将行里面每一个数据用"^"隔开
                    str+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";//下拉显示的内容
                }
                
                $("#sheng").html(str);   //将写好的str给html页面             
                }        
    
            })
    }
     市、区的function同省一样,只是有个别地方需要更改
    function FillShi()
    { var pcode=$("#sheng").val();//获取省的value值
    
        $.ajax({
            async:false,
            url:"chuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                
                var str="";
                var hang=data.trim().split("|");                
                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();//获取市的value值
        $.ajax({
            async:false,
            url:"chuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
            
                var str="";
                var hang=data.trim().split("|");        
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split("^");
                    str+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                }
                
                $("#qu").html(str);
                
                }        
                    
            
            })    
        
    }
   
});    

php代码

<?php
$pcode=$_POST["pcode"];//post获取pcode值
include("ChaXun.class.php");
$db=new ChaXun();
$sql="select AreaCode,AreaName,ParentAreaCode from Chinastates where ParentAreaCode=‘{$pcode}‘"; 
echo $db->StrQuery($sql);


//$attr=$db->Query($sql);
//var_dump ($attr);
//$str="";
//foreach($attr as $v)
//{
//    $str=$str.implode("^",$v);
//    $str=$str."|";
//}
//$str=substr($str,0,strlen($str)-1);
//echo $str;

 

ajax三级联动

标签:

原文地址:http://www.cnblogs.com/nannan-0305/p/5513475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!