三级联动可编辑实现

可供选数据:
	var	toplevel={50900000:"家用电器"};
	var secondlevel = {
						50900000:{50900004:"大家电",50892008:"厨房电器",50894004:"影音视听",50886005:"个人护理/保健按摩"}
						}
	var thirdlevel = {
						50900004:{50930001:"空调",50918004:"冰箱"}
	}

js:
var topObj="toplevel";
	var secondObj="secondlevel";
	var thirdObj="thirdlevel";
	var firstValue = 0;
	var secondValue = 0;
	var thirdValue = 0;
	
	function localDefind(){
		$("<option value='0'>请选择</option>").appendTo($("#"+topObj));
			//for (var i = 0,n=toplevel.length; i < n; i++) 
			for(var i in toplevel) 
			{
				$("<option  value='"+i+"' >"+toplevel[i]+"</option>").appendTo($("#"+topObj));
				//$("<option  value='"+toplevel[i].key+"' >"+toplevel[i].value+"</option>").appendTo($("#"+topObj));
			}
			$("<option value='0'>请选择上一级</option>").appendTo($("#"+secondObj));
			$("<option value='0'>请选择上一级</option>").appendTo($("#"+thirdObj));
	
	}
	
	function appendToTarget(key,value,target){
		$("<option  value='"+key+"' >"+value+"</option>").appendTo($("#"+target));
	}
	
	function setSelect(select,obj,target){
		for (var i = 0 in obj) 
		{
			if(i==select){
				$("<option  value='"+i+"' selected='selected' >"+obj[i]+"</option>").appendTo($("#"+target));
			}else{
				$("<option  value='"+i+"' >"+obj[i]+"</option>").appendTo($("#"+target));
			}
			
		}
	}
	
	function initSelected(topValue,secValue,thiValue)
	{
		if(topValue==0){
			localDefind();
		}else{
			setSelect(topValue,toplevel,topObj);
			setSelect(secValue,secondlevel[topValue],secondObj);
			setSelect(thiValue,thirdlevel[secValue],thirdObj);
		}
		

		$("#"+topObj).change(function(){
			firstValue = $("#"+topObj).val();
			$("#"+secondObj).empty();
			if(firstValue==0){
				localDefind();
			}else{
				var newObj=secondlevel[firstValue];
				if(newObj!=null)
				{
					$("<option value='0'>请选择</option>").appendTo($("#"+secondObj));
					for(var i in newObj){
					appendToTarget(i,newObj[i],secondObj);
					}
				}else{
					$("<option value='0'>无选择项</option>").appendTo($("#"+secondObj));
				}
				
			}
		});
		
		
		$("#"+secondObj).change(function(){
			secondValue = $("#"+secondObj).val();			
			$("#"+thirdObj).empty();
			if(secondValue==0){
				$("<option value='0'>请选择上一级</option>").appendTo($("#"+thirdObj));
			}else{
				var newObj=thirdlevel[secondValue];
				if(newObj!=null){
					$("<option value='0'>请选择</option>").appendTo($("#"+thirdObj));
					for(var i in newObj){
					appendToTarget(i,newObj[i],thirdObj);
					}
				}else{
					$("<option value='0'>无选择项</option>").appendTo($("#"+thirdObj));
				}
				
			}
		});
	};
	
	$(document).ready(
		function(){ initSelected("50900000","50900004","50918004");}
	);



html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
	#toplevel{ width:90px; margin-left:5px}
	#secondlevel{ width:130px; margin-left:5px}
	#thirdlevel{ width:160px; margin-left:5px}
</style>
</head>
<body>

<select id="toplevel"></select>
<select id="secondlevel"></select>
<select id="thirdlevel"></select>
</body>
</html>

你可能感兴趣的:(三级联动)