我的第一记，ajax级联下拉框的实现

初学web编程，好记性不如烂笔头，记录下这些，一杯复习提高之用！

项目中要求实现二级级联菜单，一级菜单为：高中、初中、小学。小学数据库中没有数据，故暂不支持。高中：高一高二高三；初中：初一初二初三。网上已有很多相关代码，但为了自己理解方便，还是给出了自己的代码。

利用jQuery的ajax异步方法，无刷新实现第二个下拉列表的内容的动态变化。下面是js部分的代码：

$("#sec").change(function(){
if($("#sec").val()!='0'){
var section = $("#sec").val();
if(section=="高中"){
section='3';
}else if(section=="初中"){
section='2';
}else if(section=="小学"){
section='1';
}
$.ajax({
url:'index.php?c=proposition&a=ajaxGetObject',//后台目标路径
data: "section="+section,//根据第一个下拉菜单所选内容，传给后台的数据
type:'post',//传数据方式
dataType:"json",//数据格式
success:function(data){ //成功之后的回调函数，data为后台返回的数据
//console.debug(data);
$("#obj").empty(); //先清空第二个下拉框
$.each(data,function(key,value)
{
var opt ="<option value='"+key+"'>"+value+"</option>";
$("#obj").append(opt);
});
//$("#obj").append(data); //在第二个下拉框中添加option数据

}
});
}else{
$("#obj").html("<option value ='0'>全部</option>");
}
});

public function ajaxGetObject() { $section=$_POST['section'];// 获得前端js传来学段数据 // $section=2表示查询初中，$section=3表示查询高中，由于数据库中没有小学信息，故$section=1查询无结果 $grade=$this->dictSchemaLib->getDictByCate("10","grade",2,$section); //数据库中查询数据 $object=array(); foreach ($grade as $k=>$value) { $object[$value['Title']]=$value['Title']; } echo json_encode($object); //编码成json格式，返回给前台，即success中的data }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!