JQ联动查询数 - 闲言碎语

[ 原创 ] JQ联动查询数

栏目：笔记作者：teemo 阅读：（10340）更新于：2015-10-15 11:55

在开发中，PHP程序员需要对JS有一定的了解，而么基础的只能自己慢慢学。

我在学校学习期间没有JS这门课，导致自己JS这方面比较菜，在写二级联动的时候，碰到问题，根据第一个去查询第二个的下拉框的值。

这里是自己的笔记：

首先我们需要两个表

test1,其中的tid为学校的识别标志，name为学校的名称，static为学校的类别关联test2的pid

然后再选择第一个为大专还是本科的时候查询第二个值

当第一个选择大专，后面显示大专的pid的值查询的学校名

这里是学习使用，学校名字随便起的，请勿见怪。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="pid" onchange="Loadschool()" id="pid">
<option value="">--请选择--</option>
<volist name="test" id="vo">
<option value="{$vo.pid}">{$vo.tag}</option>
</volist>
</select>
<select name=""  id="school">
<option value="">--请选择--</option>
</select>
<script type="text/javascript" src="__PUBLIC__/Js/jquery-1.11.0.js" ></script>
<script>
function Loadschool(){
var data = $('#pid').val();
var url = "/Home/Index/getSchool";
getdata(data,url);
}
function getdata(data,url){
var pid = $("#pid").val();
$.ajax({
cache:false,
type:"post",
url:url,
async:true,
dataType:'json',
data:{pid:data},
success:function(data){
var test;
for(var key in data){
test += "<option value='" + key + "'>" + data[key] + "</option>";  
}
//alert(test);
$("#school").html(test);
}
});
}
</script>
</body>
</html>

我这里面写的方法把ajax封装起来吗，让如果有3级联动的时候更方便，也可以不用直接ajax的

function Loadschool(){
var data = $('#pid').val();
var url = "/Buy/Index/getSchool";;
$.ajax({
cache:false,
type:"post",
url:url,
async:true,
dataType:'json',
data:{pid:data},
success:function(data){
var test;
for(var key in data){
test += "<option value='" + key + "'>" + data[key] + "</option>";  
}
$("#school").html(test);
}
});
}

然后请求的时候附带pid过来，

public function index(){
    $this->test=M('test2')->select();
      $this->display();
    }
public function getSchool(){
    $school=M("test1")->where(array("static"=>I('post.pid')))->select();
    foreach($school as $k => $v){
    $arr[$v['tid']] = $v['name']; 
    }
    //dump($arr);die;
    $this->ajaxReturn($arr);
}

第一个方法值当访问这个页面的时候把第一下拉框的值查询出来给前端页面，第二个方法是请求查询筛选的学校名，这里因为查询的是二维数组，直接返回的是对象，前端接收的时候不是很方便，我就转换成数组，然后返回。返回的数据如下图：