三级联动可编辑实现

最新推荐文章于 2021-02-17 05:09:44 发布

原创最新推荐文章于 2021-02-17 05:09:44 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于JavaScript实现的家用电器分类选择器，包括顶级、次级和三级分类的展示与选择功能。

可供选数据：


	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>