利用json强大的数据表现形式,做的一个简单的级连效果 {键:值} [值1,值2,值3] <!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=gb2312" /> <mce:style type="text/css"><!-- select{ width:200px; } --></mce:style><style type="text/css" mce_bogus="1">select{ width:200px; }</style> <title>无标题文档</title> <mce:script language="javascript"><!-- var data={ "纸牌游戏":{ "Item":["斗地主","拖拉机","桥牌"] }, "棋类游戏":{ "Item":["军棋","跳棋","五子棋"] }, "其它游戏":{ "Item":["连连看","麻将","台球"] } } function init(){ $("selGame").options.add(new Option("--游戏分类--","-1")); for(p in data){ //取出一项 $("selGame").options.add(new Option(p)); } } window.οnlοad=init; function $(id){ return document.getElementById(id); } function getItems(){ var index=$("selGame").selectedIndex; var txt=$("selGame").options[index].text;//选中项的值 //清空项列表 $("selItem").length=0; //取出对象中的项 for(p in data[txt].Item){ $("selItem").options.add(new Option(data[txt].Item[p])); } } // --></mce:script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> 游戏分类 <select name="selGame" onChange="getItems();" id="selGame"> </select> </label> <p> 分类详细 <select name="selItem" id="selItem"> </select> </p> <p> </p> <p>{}大括用于包括键值类型</p> <p>[]用于包括数组类型</p> <p>var data={<br /> "纸牌游戏":{<br /> "Item":["斗地主","拖拉机","桥牌"] <br /> },<br /> "棋类游戏":{<br /> "Item":["军棋","跳棋","五子棋"] <br /> },<br /> "其它游戏":{<br /> "Item":["连连看","麻将","台球"] <br /> }<br /> }</p> </form> </body> </html>