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

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

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

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

@H_404_7@

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 }