Code<?php
header('Content-Type:text/html;charset=utf-8');
if(isset($_GET['depid'])){
//$depinfo=array();
echo "[{'depid':'-1','depname':'请选择'},{'depid':'1','depname':'开发'},{'depid':'2','depname':'测试'},{'depid':'3','depname':'产品'}]";
exit();
}
?>
<html>
<head>
<title>Test jQuery</title>
</head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript">
var depChildNum=0;
function getdepinfoChild(e){
var selectValue='';
var selectId='';
if(e.srcElement){
selectValue=e.srcElement.value;
selectId=e.srcElement.id;
}else{
selectValue=e.target.value;
selectId=e.target.id;
}
if(selectValue==''){
return;
}
var tmpreg=/^childDep\d*/;
if(!tmpreg.test(selectId)){
return;
}
try{
var tmpid=parseInt(selectId.replace('childDep',''));
var tmpContent=document.getElementById('depContentDiv');
if(tmpContent){
var childList=tmpContent.childNodes;
for(i=0;i<childList.length;i++){
if(tmpreg.test(childList[i].id)){
if( parseInt(childList[i].id.replace('childDep','')) > tmpid ){
tmpContent.removeChild(childList[i]);
i--;
}
}
}
}else{
return;
}
depChildNum=tmpid;
}catch(e){
return;
}
getdepinfo(selectValue);
}
function getdepinfo(selectValue){
$.getJSON("tmpzwbtest.php", { depid: selectValue } ,
function(json){
var depContentDiv=document.getElementById('depContentDiv');
if(depContentDiv && json.length > 0){
var childDep=document.createElement("select");
depChildNum=depChildNum+1;
childDep.id='childDep'+depChildNum;
for(var i=0;i<json.length;i++){
var childHtml=document.createElement('option');
childHtml.value=json[i].depid;
childHtml.innerHTML=json[i].depname + depChildNum;
childDep.appendChild(childHtml);
}
if(childDep.attachEvent){
childDep.attachEvent('onchange',getdepinfoChild);
}else if(childDep.addEventListener){
childDep.addEventListener('change',getdepinfoChild,true);
}else{
childDep.onchange=getdepinfoChild;
}
depContentDiv.appendChild(childDep);
}
}
);
}
function getdepinfoFirst(selectValue){
depChildNum=0;
var tmpContent=document.getElementById('depContentDiv');
if(tmpContent){
var childList=tmpContent.childNodes;
for(i=0;i<childList.length;i++){
if(childList[i].id != 'firstSelectCon'){
tmpContent.removeChild(childList[i]);
i--;
}
}
}else{
return;
}
getdepinfo(selectValue);
}
</script>
<body>
<div id="depContentDiv" name="depContentDiv" >
<select id="firstSelectCon" onchange="getdepinfoFirst(this.value)" name="firstSelectCon">
<option value="1" >部门名称</option>
<option value="2">部门名称2</option>
</select>
</div>
</body>
</html>