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

前端之家收集整理的这篇文章主要介绍了我的第一记,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 }

原文链接:https://www.f2er.com/ajax/164574.html

猜你在找的Ajax相关文章