【原创】 JQ联动查询数
栏目:PHP  作者:隆航  阅读:(1794)

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

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

这里是自己的笔记:

首先我们需要两个表

blob.png

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

blob.png

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

blob.png

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

blob.png

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

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);
}

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

blob.png

然后前端data接收值后for循环压入test数组,在写入第二个查询框。就形成了二级联动查询了。



往事随风
#98

   往事随风     2015-10-16 22:26    华为      浙江省温州市

[em_67]博主的文章挺好的,继续加油哦,支持一下~

隆航

   隆航     10-16 22:28    回复 @往事随风 中说到:

谢谢支持。会一直更新的

昵称
邮箱
域名
  记住 通知博主
验证码

  程序相关

站点版本:青春博客-V 2.1.0

开源版本:青春博客-Beta v2.0

 下载  在线支付  在线工具  在线音乐

  随机文章