下载文档原格式
花了两天时间。
研究ＡＪＡＸ，终于独立完成一个无限组的多级菜单联动功能。
主要特点：就是ＨＴＭＬ静态页面可以无刷新的与ＰＨＰ动态角本文件及数据库交互（这也是ＡＪＡＸ的核心目的）。
以下把代码贴出来。
供大家参考指正：ajax.js文件（位于根目录下js子目录）var xmlHttp;function createXmlHttp(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHttp");}}basic_inc.php(位于根目录下/include子目录下)<?php$DB_SERVER="localhost";$DB_NAME="ajax";$DB_USER="root";$DB_PASSWORD="";?>conn.php(位于根目录下/include子目录下)<?phprequire_once("dir_inc.php");require_once($ROOT_DIR."include/basic_inc.php");@ $db=mysql_connect($DB_SERVER,$DB_USER) or die ("faile!".mysql_error());@mysql_select_db($DB_NAME);?>dir_inc.php（位于根目标下/include子目录下）<?php$ROOT_DIR="../";?>select_menu.html(位于根目录下是核心前台文件)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>select_menu</title><script type="text/javascript" src="js/ajax.js">//这里引用创建xmlHttp对像的文件（对浏览器做过判断）</script><script type="text/javascript">var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ＩＤvar selArray;//申明一个全局数组。
题目：thinkphp jquery与ajax实现省市区三级联动菜单thinkphp jquery与ajax实现省市县三级联动菜单本示例以省市区三级联动菜单为例：实现步骤：第一：先默认从数据库中读取所有的省份。
第二：通过jquery中的change事件，当省份的内容发生改变时，执行change事件，通过jquery 获得被选中的省份的value值，再后通过异步加载数据。
第三：与第二步相似，当用户选择城市时，会触发change事件，通过jquery 获得被选中的城市的value值，再次进行异步加载数据。
具体示例代码如下：RecruitmentAction.class.phpclass RecruitmentAction extends Action{public function chacity(){$code=I(post.code$city=M(where(array(provincecode$code))-select();echo "option value=请选择城市/optionif($city){foreach($city as $c){echo "option value=".$c[".$c[/optionpublic function chaarea(){ $code=I(post.code$area=M(where(array(citycode$code))-select();echo "option value=/optionif($area){foreach($area as $a){echo "option value=".$a[".$a[/optionpublic function chacitydefault(){ $code=I(post.code$city=M(where(array(provincecode$code))-select();if($city){foreach($city as $c){echo "option value=".$c[".$c[public function chaareadefault(){$code=I(post.code$area=M(where(array(citycode$code))-select();if($area){foreach($area as $a){echo "option value=".$a[".$a[/optionsendrecruitment.phpmeta charset="utf-8"/title省市县三级联动菜单/tiltescirpt src="/jquery/1.11.1/jquery.min.js"script$(function(){#sheng).change(function(){ var code=$(#sheng option:selected ).val();$.post(__URL__/chacity:code},function(data){ #city).html(data);#city).change(function(){ var code=$(#city option:selected ).val();$.post(__URL__/chaarea:code},function(data){).html(data);var code=$(#sheng option).eq(0).val();$.post(__URL__/chacitydefault:code},function(data){#city).html(data);var areacode=110100; $.post(__URL__/chaareadefault :areacode},function(data){ #area).html(data);/script/head$m=M(province$p=$m-id ascselect();input type="text" name="jobplace" value="" /select name="job_province" id="sheng" style="width:100px;"if($p){foreach($p as $v){option value="php echo $v[php echo $v[/option/selectselect name="job_city" id="city" style="width:100px;"/selectselect name="job_area" id="area" style="width:100px;"/select/body/html注：本示例中，控制器部分：chacitydefault()，chaareadefault()方法是为了默认页面加载时，执行一次，让省，市，与区进行显示。
jQuery实现简单三级联动效果本⽂实例为⼤家分享了jQuery实现简单三级联动的具体代码，供⼤家参考，具体内容如下⾸先写⼀个JSON数据[{"province": "吉林省","cities": [{"city": "长春市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "吉林市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "⽩⼭市","counties": ["⼆道区", "河东区", "⾼新区"]}]},{"province": "辽宁省","cities": [{"city": "沈阳市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "⼤连市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "铁岭市","counties": ["⼆道区", "河东区", "⾼新区"]}]},{"province": "⼭东省","cities": [{"city": "青岛市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "济南市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "威海市","counties": ["⼆道区", "河东区", "⾼新区"]}]}]然后⽤Ajax动态获取JSON⽂件中的数据完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>三级联动</title></head><body><!-- 三级联动 - 两个⼆级联动 --><select id="province"><option value="">---</option></select><select id="city"><option value="">---</option></select><select id="county"><option value="">---</option></select><script src="js/jquery-1.12.4.js"></script><script src="../js/createXMLHttpRequest.js"></script><script>var $province = $("#province");var $city = $("#city");var $county = $("#county");var json;$.getJSON("data/server1.json", function (data) {// 把data保存到json全局变量中json = data;// 遍历data数据$.each(data, function (index, obj) {// 获取所有的省份信息var provinceName = obj.province;// console.log(provinceName);// 将省份信息添加到对应的select元素中$province.append(`<option value="${provinceName}">${provinceName}</option>`);});$province.change(function () {// 将城市下拉列表的选项清空$city.empty();$city.append(`<option value="">---</option>`);// 获取到所选择的城市的⽂本信息var provinceElementName = $(this).children("option:selected").text();// console.log(provinceElementName);$.each(json, function (index, obj) {var provinceName = obj.province;// console.log(provinceName);if (provinceElementName === provinceName) {// 获取到城市数组集合var cities = obj.cities;// 遍历城市数组集合$.each(cities, function (index, obj) {// console.log(obj.city);// 获取到城市名称var cityName = obj.city;// 将该省对应的城市名称添加到对应的select中$city.append(`<option value="${cityName}">${cityName}</option>`);});}});});$city.change(function () {// 将区级下拉列表的选项清空$county.empty();$county.append(`<option value="">---</option>`);// 获取到所选择的城市的⽂本信息var cityElementName = $(this).children("option:selected").text();// console.log(cityElementName);$.each(json, function (index, obj) {// 获取该省对应的所有的城市信息var cities = obj.cities;// console.log(cities);$.each(cities, function (index, cityObj) {// console.log(cityObj.city);var cityName = cityObj.city;if (cityElementName === cityName) {// 获取到区级数组集合// console.log(cityObj.counties);var counties = cityObj.counties;// 遍历区级数组集合$.each(counties, function (index, value) {// 获取到区级名称// console.log(value);// 将该城市对应的区级名称添加到对应的select元素中$county.append(`<option value="${value}">${value}</option>`);});}});});});});</script></body></html>效果如下以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
PHP+Ajax三级联动菜单PHP+Ajax 三级联动菜单PHP+Ajax实例+注释演示2009-08-26 13:01一.使用ajax有以下固定步骤：1, 从页面触发Ajax的操作.2, 定义创建XMLHttpRequest对象的方法(建立一个XMLHttpRequest对象),也是就var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//根据浏览器的不同有差异3, 然后建立一个函数，用来指定载入的数据来源！3.1,使用open方法打开数据来源(也就是我们要传入参数到DB查询的信息)，但不意味着一定要发送数据显示！3.2,用onreadystatechange来指定数据装载的方式.(onreadystatechange是一个异步响应事件，就是因为它，ajax才那么完美.onreadystatechange事件中可以接收到服务器传回来的数据，通过分析和利用这些数据从而完成客户端的相应操作，onreadystatechange中的第三个参数你设为true，表示启用xmlHttp的异步通讯模式，这时你发出send命令后，浏览器还可以进行其它操作，如果设为false，浏览器就会进入无响应状态，直到xmlHttp接收完毕服务器传回的数据)3.3,使用send发送数据！4, 处理Ajax回传的数据(xml或text类型),使数据能按你的意愿现实在客户端.5, 回显到页面给用户.二,在网上看了一些资料,自己修改后,小小的整理主要出核心代码+精彩注释,全部贡献:index.php 客户端显示,包括执行AJAX的过程data.php 数据处理,查询数据,并回显/*************************index.php**********************/<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-------------------------------------------------------------- --省的字段是：province--市的字段是：city--县的字段是：area---------------------------------------------------------------------------><script type="text/javascript">/*********定义创建XMLHttpRequest对象的方法***************************************/var xmlHttp;//声明变量var requestType="";//声明初始类型为空function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头{if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真，否则是假{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp}else if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp}}/****************判断服务器响应的事件，如果返回是4则说明交互完成，判断标示头，**************************************************/function handleStateChange(){//判断返回的一个函数，来确定执行那个的函数if(xmlHttp.readystate==4){//4说明是执行交互完毕0 (未初始化)1 (正在装载)2 (装载完毕) 3 (交互中)4 (完成)if(xmlHttp.status==200){//http的一个报头说明成功找到if(type=="city"){//判断查询的类型showcity();//返回响应的显示}else if(type="area"){//判断响应的查询的类型showarea();//返回响应的显示}}}}/**************************城市的一个查询函数**********************************************************/function queryCity(citycode){//执行程序查询，查询城市的eval("document.form1.city.length=0;");//eval检查JScript 代码并执行.eval("document.form1.city.options.add(new Option('请选择城市','-1'));");createXMLHttpRequest();//调用创建XmlHttp的函数type="city";//表示类型，查询城市处理显示的时候需要用到varurl='data.php?provincecode='+citycode+'&n='+Math.random() ;//设定URL传值方法同时防止缓存xmlHttp.open("GET",url,true);//建立服务器连接，异步传输truexmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因}/**********************县区的一个查询函数***********************************************************/function queryArea(citycode){//查询程序eval("document.form1.area.length=0;");//eval检查 JScript 代码并执行.eval("document.form1.area.options.add(new Option('请选择县市','-1'));");createXMLHttpRequest();//调用创建XmlHttp的函数type="area";//查询县的varurl="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存xmlHttp.open("GET",url,true);xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因}/*********************一个显示函数*********************/function showcity(){//显示函数var a = xmlHttp.responseText.split('-');n = a.length;var aa = new Array();for(var i=0;i<n;i++){aa = a[i].split('**');eval("document.form1.city.options.add(newOption(aa[1],aa[0]));");//eval检查 JScript 代码并执行.}}function showarea(){var a = xmlHttp.responseText.split('-');n = a.length;var aa = new Array();for(var i=0;i<n;i++){aa = a[i].split('**');eval("document.form1.area.options.add(newOption(aa[1],aa[0]))");}//document.getElementById("area").innerHTML=xmlHttp.re sponseText;//捕获ID显示返回的数据}</script></head><body><?php$conn = mysql_connect("localhost","root","3661000");//链接数据库mysql_select_db("novel");//选择数据库mysql_query("set names 'utf8'");//设定字符集$sql = "select * from province";//查询数据库province表也就是省$result = mysql_query($sql);//执行语句赋值给变量><form name="form1"><!--输出表单头--><!--输出下拉列表框，并设定onchange响应事件，把省值传递过去--><select id='province' onchange='queryCity(this.options[this.selectedIndex].value)'> <!--输出下拉列表项值--><option value='-1' selected>请选择省份</option><?phpwhile($row=mysql_fetch_row($result)){//循环循环查询显示省输出数据显示echo "<option value='$row[1]'>$row[2]</option>\n";}></select><!--下拉列表项尾数--><select name="city" onchange="queryArea(this.options[this.selectedIndex].value)"></select> <!--显示数据的城市的位置--><select name="area"></select><!--显示数据的城市的位置--> </form><!--表单项结尾--></body></html>/***************data.php*****************/<?php$provincecode = $_GET['provincecode'];//接收省键值$citycode = $_GET['citycode'];//接收城市键值$conn = mysql_connect("localhost","root","3661000");//连接主机mysql_select_db("novel");//选择数据库mysql_query("set names 'utf8'");if($provincecode!=""){//如果传递过来的不为空则执行$sql = "select * from city where provincecode=$provincecode";//查询城市符合属于上边传递过来的省的字段$result = mysql_query($sql);//执行SQL查询语句while($row=mysql_fetch_row($result)){//循环记录集$xml .= $row[1]."**".$row[2]."-";}}if($citycode!=""){$sql = "select * from area where citycode=$citycode";$result = mysql_query($sql);while($row = mysql_fetch_row($result)){$xml .=$row[1]."**".$row[2]."-";}}$xml = substr($xml,0,strlen($xml)-1);//消掉最后的"-"echo $xml; //返回数据做回显。
mysqlphpajax使⽤jsonp跨域完成省市三级联动mysql php ajax 使⽤jsonp跨域完成省市三级联动mydb.sql⽤到了area，city，province 三个表cont.php 连接数据库data2.php 得到前端传过来的值，处理SQL语句，输出内容。
因为使⽤jsonp⽅式，就是输出函数名⾥⾯加上参数就可以了。
ajax的跨域问题可以看我ajax的⽂章<?phprequire_once('cont.php');$code = $_GET['citycode'];$callback = $_GET['callback'];$flag = $_GET['flag'];if($flag == 1){$retval= mysqli_query($conn,"select * from province order by id");}else if($flag == 2){$retval= mysqli_query($conn,"select * from city where provincecode = '".$code."' order by id" );}else if($flag == 3){$retval= mysqli_query($conn,"select * from area where citycode = '".$code."' order by id" );}// 创建⼀个空数据$sayList = [];// 循环遍历得到数据库内容while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)){$sayList[]= array('code'=>$row['code'],'name'=>$row['name']);//⼆维数组}// // 数组长度// echo count($sayList);// // 数组结构// print_r($sayList);// 循环遍历// for($i=0;$i<11;$i++){// for($j=0;$j<2;$j++){// echo $sayList[$i]['code']."-->".$sayList[$i]['name'];// }// }if($sayList){echo$callback.'('.json_encode($sayList).')';}else{echo$callback.'('.'[]'.')';}>select.html<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#showInfo{position: absolute;width: 600px;height: 500px;overflow-y: scroll;overflow-x: hidden;background: lightgreen;left: 50%;margin-left: -300px;}#showInfo div{float:left;margin-left: 30px;margin-top: 30px;width: 160px;}#showInfo div select{width: 160px;}</style></head><body><div id="showInfo"><div><select id="province"></select></div><div><select id="city"></select></div><div><select id="area"></select></div></div><script type="text/javascript">$(function(){//获取列表数据的通⽤⽅法function getList(code,flag,callback){$.ajax({url:'data2.php',type:'get',dataType:"jsonp",data:{citycode:code,flag:flag},success:callback});}//获取地区信息的回调函数var area = function(data){$.each(data,function(i,element){var op = $("<option></option>").attr("value",data[i].code).append(data[i].name); $("#area").append(op);});}// 拼接市var city=function(data){for (var i = 0; i <data.length; i++) {var op = $("<option></option>").attr("value",data[i].code).append(data[i].name); $("#city").append(op);}// 判断是否是直辖市，即只有⼀个市if(data.length == 1){var citycode = $("#city").children("option").eq(0).attr("value");getList(citycode,3,area);}}// 拼接省var pr=function(data){for (var i = 0; i <data.length; i++) {var op = $("<option></option>").attr("value",data[i].code).append(data[i].name); $("#province").append(op);}//默认北京市getList('110000',2,city);getList('110100',3,area);}// 刚开始调⽤函数getList(1,1,pr)//给省份信息设置选择事件$("#province").change(function() {$("#city").children("option").remove();$("#area").children("option").remove();var pcode = $(this).val();getList(pcode,2,city);});//给省份信息设置选择事件$("#city").change(function() {$("#area").children("option").remove();var citycode = $(this).val();getList(citycode,3,area);});})</script></body></html>。
jquery+ajax实现省市区三级联动（封装和不封装两种⽅式）⾸先，要实现如下图效果，1、要理清思路：先做出三个下拉菜单----根据第⼀个下拉菜单的value值获取第⼆个下拉列表的内容，第三个同理。
2、⽤到的数据库表：Chinastates表规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）第⼀种⽅式：没有⽤到封装，数据读取较慢，可以看看原理，这样在第⼆种⽅式封装时就容易多了。
代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../jquery-1.11.2.min.js"></script></head><body><select id="sheng"></select><select id="shi"></select><select id="qu"></select></body></html><script type="text/javascript">$(document).ready(function(e){//输出省var code = "0001";$.ajax({async:false,//取消异步url:"chuli.php",data:{code:code},type:"POST",dataType:"TEXT",success:function(data){var hang = data.trim().split("|"); //trim()去空格var str="";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#sheng").html(str);}});//输出市$("#sheng").click(function(){var code2=$("#sheng").val();$.ajax({async:false,url:"chuli.php",data:{code:code2},type:"POST",dataType:"TEXT",success:function(data2){var hang2 = data2.trim().split("|");var str2 ="";for(var i=0;i<hang2.length;i++){var lie2=hang2[i].split("^");str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";}$("#shi").html(str2);}});})//输出区县$("#shi").click(function(){var code3=$("#shi").val();$.ajax({async:false,url:"chuli.php",data:{code:code3},type:"POST",dataType:"TEXT",success:function(data3){var hang3 = data3.split("|");var str3 ="";for(var i=0;i<hang3.length;i++){var lie3=hang3[i].split("^");str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";}$("#qu").html(str3);}});})})</script> 期间出现的问题：每个下拉列表的第⼀个数据输不出来：是因为每个下拉列表的第⼀个数据的value值都带有空格所以在输出data时要去空格data返回的值可能带有空格换⾏等，所以要⽤trim()⽅法去空格第⼆种⽅式：封装成插件，以后可以随时调⽤（重要）（1）主页⾯：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><br>//引⼊jquery包<script src="../jquery-1.11.2.min.js"></script><br>//引⽤我们⾃⼰封装的js⽂件<script src="sanji.js"></script></head><body><br>//id要与封装的js插件中⼀致<div id="sanji"></div></body></html>（2）我们⾃⼰封装的js插件$(document).ready(function(e){//扔三个下拉列表到主页⾯建的div中$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加载省的数据LoadSheng();//加载市的数据LoadShi();//加载区的数据LoadQu();//给省的下拉列表添加点击事件，当省变化时，对应的市和区会发⽣变化$("#sheng").click(function(){LoadShi();LoadQu();})//给市的下拉列表添加点击事件，当市变化时，对应的区发⽣变化$("#shi").click(function(){LoadQu();})});//加载省的下拉列表function LoadSheng() {var pcode = "0001";$.ajax({async: false,url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";}$("#sheng").html(str);}});}//加载市省的下拉列表function LoadShi() {var pcode = $("#sheng").val();$.ajax({async: false,url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";}$("#shi").html(str);}});}//加载省的下拉列表function LoadQu() {var pcode = $("#shi").val();$.ajax({url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";}$("#qu").html(str);}});} 其次就是处理页⾯(两种⽅法都⽤到的)：chuli.php<?php$code=$_POST["code"];require "DB.class.php";$db=new DB();$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";$str=$db->strquery($sql);echo $str;最后就是封装的类⽂件：DB.class.phpfunction strquery($sql){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$result = $db ->query($sql);$arr =$result->fetch_all();$str="";foreach($arr as $v){$str=$str.implode("^",$v)."|";}$str = substr($str,0,strlen($str)-1);return $str;}}>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
AJAX实现省市县三级联动效果最近在学AJAX做到这个省市县三级联动的案例，这⾥只是讲⼀下ajax请求的⼀些知识，对服务端数据.php⽂件就不叙述了。
（tips:其实省市县三级联动只需要引⼊jQuery省市县三级联动插件就可以实现）效果图⾸先准备两个服务端⽂件，另⼀个⽂件太长，这⾥就不导⼊了selsect.php<?php/*省市县后台数据接⼝接⼝调⽤规则：1.参数⼀：flag，⽤来区分请求的是省市县中间的那种数据2.参数⼆:选择省的时候传递pid，选择市的时候传递cIdhttp://localhost/select.php?flag=1#pId=23*/// include('./selectdata.php');require('./selectdata.php');// 省市县数据来⾃selectdata.php⽂件$province = $provinceJson;$city = $cityJson;$county = $countyJson;$flag = $_GET['flag'];// 省级数据if($flag == 1){echo json_encode($province);// 市级数据}else if($flag == 2){$pId = $_GET['pId'];$cityData = array();foreach ($city as $value) {if($value->id == $pId){// 直辖市array_push($cityData,$value);break;}else if($value->parent == $pId){// ⾮直辖市array_push($cityData,$value);}}echo json_encode($cityData);// 县级数据}else if($flag == 3){$cId = $_GET['cId'];$countyData = array();foreach ($county as $value) {if($value->parent == $cId){array_push($countyData,$value);}}echo json_encode($countyData);}>select.html这⾥可以⽤底层ajax 请求，也可以⽤快捷⽅法 $.get ⽅法进⾏数据请求。
Web.Config中：
-----------------------------------------------------------------------------------------------
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
-----------------------------------------------------------------------------------------------
javascript脚本：
----------------------------------------------------------------------------------------------- <script language="javascript" type="text/javascript">
<!--
// ACLOUD 常用JS函数
function getBid(s){
return document.getElementById(s);
}
function getBmc(s){
return document.getElementByName(s);
}
//显示分类列表// key,stid,tb,bskeyid,bsid
function showNext(obj,key,id,tb,bskeyid,bsidv)
{
if(bsidv==null || bsidv=="" || bsidv.length<1)return;
var slt =getBid(obj);
var v = AddPro.getNextClass(key,id,tb,bskeyid,bsidv).value; // 类的名称
//alert(v);
//return;
if (v != null){
if(v != null && typeof(v) == "object" && v.Tables != null)
{
slt.length = 0;
slt.options.length = 0;
slt.options.add(new Option("请选择",0));
//加了个“请选择”主要为了触发onchange事件
if(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("请选择",0));
}
for(var i=0; i<v.Tables[0].Rows.length; i++)
{
var txt = v.Tables[0].Rows[i].txt; //这个地方需要注意区分大小写
var vol = v.Tables[0].Rows[i].vol; //跟dataset表的列名称要一
致
slt.options.add(new Option(txt,vol));
}
}
}
return;
}
//JS方法取值
function getData(){
var str = getBid("ddl1").value +":"+ getBid("ddl2").value +":"+ getBid("ddl3").value;
str = "您选择的是：" +str;
getBid("<%=Label1.ClientID%>").innerText = str;
alert(str);
return false;
}
-->
</script>
----------------------------------------------------后台----------------------------------------------------------- Page_Load中：
//必要的
AjaxPro.Utility.RegisterTypeForAjax(typeof(AddPro));
----------------------------------------------------后台--------------------------------------------------------- [AjaxPro.AjaxMethod]
public DataSet getNextClass(string key, string stid, string tb, string bskeyid, string bsid) {
//因为不希望页面可以知道字段名称所以as txt,id as vol 如果是sql ser 可以用=
//页面获取的列名称必须跟这个一同样而且区分大小写一般都是这个地方容易疏忽了
//所以二级分类没变化
try
{
return BLL_Production.ToGetst(key,stid,tb,bskeyid,bsid);
}
catch
{
//throw;
return null;
}
}
private void BindDc()
{
//第一个
ddl1.DataSource = BLL_ProBigClass.GetBigClassModel();
ddl1.DataTextField = "Pro_BigClass1";
ddl1.DataValueField = "ID1";
ddl1.DataBind(); // key,stid,tb,bskeyid,bsid
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext('ddl2','Pro_SmallClass','ID','Tb_Pro_SmallClass','Pro_BigClassID',this.options[selecte dIndex].value);");
//可以先判断DropDownList.SelectedItem.Value
//第二个
ddl2.DataSource = BLL_ProSmallClass.GetSmallClassByID(Convert.ToInt32(ddl1.SelectedItem.Value));
ddl2.DataTextField = "Pro_SmallClass1";
ddl2.DataValueField = "ID1";
ddl2.DataBind();
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext('ddl3','Pro_ThreeClass','ID','Tb_Pro_ThreeClass','Pro_SmallID',this.options[selectedIn dex].value);");
//第三个
ddl3.DataSource = BLL_ProThreeClass.GetThreeClassByID(Convert.ToInt32(ddl2.SelectedItem.Value));
ddl3.DataTextField = "Pro_ThreeClass1";
ddl3.DataValueField = "ID1";
ddl3.DataBind();
}
--------------------------------------------------------------------------------------------------------------------。
