三级连动菜单(解决后再加50分,立即结贴)

很麻烦,关键是做出来的样子不好看...
首先要css,然后又是图片~~~

<html>
<style>
/* 全局CSS定义 */
body {font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:15px; color:#000;}/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
ul{}
</style>
<body>
<DIR onclick=m_show()>
<li>01  家电
  <ul>
   <li>0101  彩电
    <ul>
    <li>010101  长虹</li>
    <li>010102  TCL</li>
<li>010103  创维</li>
    </ul>
</li>
<li>0102  冰箱
    <ul>
    <li>010201  容星</li>
    <li>010202  海尔</li>
    </ul>
</li>
<li>0101  彩电
    <ul>
    <li>010101  长虹</li>
    <li>010102  TCL</li>
<li>010103  创维</li>
    </ul>
</li>
  </ul>
</li>
<li>01  家电
  <ul>
   <li>0101  彩电
    <ul>
    <li>010101  长虹</li>
    <li>010102  TCL</li>
<li>010103  创维</li>
    </ul>
</li>
<li>0102  冰箱
    <ul>
    <li>010201  容星</li>
    <li>010202  海尔</li>
    </ul>
</li>
<li>0101  彩电
    <ul>
    <li>010101  长虹</li>
    <li>010102  TCL</li>
<li>010103  创维</li>
    </ul>
</li>
  </ul>
</li>
</body>
</html>
<script>
function getParentLI(lin){
     if(lin!=null){
       try{
         lin=lin.parentElement;
         while(lin.tagName!="LI"&&lin!=null){
            lin=lin.parentElement;
         }
       }catch(e){}
     }
     return lin;
}
function m_show(){
   var lin=event.srcElement;
   if(lin.tagName!="LI")
     lin=getParentLI(lin);
   lin=lin.childNodes;
   if(lin!=null&&lin.length>0)
   {
     for(var i=0;i<lin.length;i++){
       var mlin=lin.item(i);
       if(mlin.tagName=="UL")
       {
         if(mlin.style.display==""){
           mlin.style.display="none";
         }else mlin.style.display="";
         break;
       }
     }
   }
}
//设置隐藏ul
function adu_Hidden(lin)
{
     for(var i=0;i<lin.length;i++)
     {
var mlin=lin.item(i);
//alert(mlin.tagName);
if(mlin.tagName=="UL")
{
   mlin.style.display="none";
}
        if(mlin!=null)
{
          adu_Hidden(mlin.childNodes);
        }
     }

}
adu_Hidden(document.body.childNodes);
//end设置</script>

可以在01 家电前面的li中加入onmouseover=m_show()
程序可能还存在bug,自已改改吧

http://fula2005.googlepages.com/mymenu.html自己写的,仿CSDN外观~~~无限级菜单联动~~~~~~还有OO思想哦~~~第一次写js类库,写到差点吐口水,md真难调试~~~

想了个笨方法,但是有点问题
就是在IE里只有刷新一次才能够显示(没刷前pro_all.length=0 刷后为2). FF里面pro_all.length总是0,共三个文件
xml：
=========================================
<?xml version="1.0" encoding="gb2312"?>
<content>
<list title="家电" id="01">
<list2 title="彩电" id="01">
<pro>长虹</pro>
<pro>TCL</pro>
<pro>创维</pro>
</list2>
<list2 title="冰箱" id="02">
<pro>容升</pro>
<pro>海尔</pro>
</list2>
<list2 title="音响" id="03">
<pro>创新</pro>
<pro>漫步者</pro>
</list2>
</list>
<list title="电脑配件" id="02">
<list2 title="内存" id="01">
<pro>金士顿</pro>
<pro>现代</pro>
</list2>
<list2 title="处理器" id="02">
<pro>Intel</pro>
<pro>AMD</pro>
</list2>
<list2 title="显示器" id="03">
<pro>CTX</pro>
<pro>SONY</pro>
<pro>AOC</pro>
</list2>
</list>
</content>
=========================================
js：
=========================================
// JavaScript Document
function createXMLHttp(){
if(window.AcitveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}var pro_all=new Array();function get_pro(){
var xmlHttp=createXMLHttp();
xmlHttp.open("GET","xml.xml",true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var result=xmlHttp.responseXML;
var content=result.getElementsByTagName("list");
for(var a=0;a<content.length;a++){
pro_all[a]=new Object();
pro_all[a].title=content[a].getAttribute("title");
//pro_all[a].id=content[a].getAttribute("id");
pro_all[a].list=new Array();
var list=content[a].getElementsByTagName("list2");
for(var b=0;b<list.length;b++){
pro_all[a].list[b]=new Object();
pro_all[a].list[b].title2=list[b].getAttribute("title");
pro_all[a].list[b].pro=new Array();
var list2=list[b].getElementsByTagName("pro");
for(var c=0;c<list2.length;c++){
var pro=list2[c].firstChild.nodeValue;
pro_all[a].list[b].pro[c]=pro;
}
}
}
}
}
}
xmlHttp.send(null);
}function dis_pro1(){
get_pro();
var se_pro1=document.getElementById("pro1");
se_pro1.onchange=function(){
dis_pro2(se_pro1.value);
}
for(var i=0;i<pro_all.length;i++){
var option=document.createElement("option");
option.setAttribute("value",i);
var opt=document.createTextNode(pro_all[i].title);
option.appendChild(opt);
se_pro1.appendChild(option);
}
}function dis_pro2(pro_num){
var pro_num=Number(pro_num);
dis_pro3(pro_num,0);
var se_pro2=document.getElementById("pro2");
se_pro2.onchange=function(){
dis_pro3(pro_num,se_pro2.value);
}
clear_child(se_pro2)
//if(pro_num!=""){
var list=pro_all[pro_num].list;
for(var i=0;i<list.length;i++){
var option=document.createElement("option");
option.setAttribute("value",i);
var opt=document.createTextNode(list[i].title2);
option.appendChild(opt);
se_pro2.appendChild(option);
}
//}
}function dis_pro3(pro_num1,pro_num2){
var pro_num1=Number(pro_num1);
var pro_num2=Number(pro_num2);
var se_pro3=document.getElementById("pro3");
clear_child(se_pro3)
//if(pro_num1!="" && pro_num2!=""){
var list=pro_all[pro_num1].list[pro_num2].pro;
for(var i=0;i<list.length;i++){
var option=document.createElement("option");
var opt=document.createTextNode(list[i]);
option.appendChild(opt);
se_pro3.appendChild(option);
}
//}
}function clear_child(pro){
var ind=pro.childNodes.length;
for(var i=ind-1;i>=0;i--){
pro.removeChild(pro.childNodes[i]);
}
}window.onload=dis_pro1;
================================================
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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
select{margin-right:15px; width:100px;}
</style>
<script type="text/javascript" src="js.js"></script>
</head><body>
<select id="pro1">
<option value="">请选择类别</option>
</select>
<select id="pro2">
<option value="">请选择大类</option>
</select>
<select id="pro3">
<option value="">请选择大类</option>
</select>
</body>
</html>
==================================================

各位大侠，我想要的不是像CSDN的那个树，是想要三个<select></select>的联动下拉列表框

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="Javascript">
/*****************************************************************************/
//联动下拉框的实现
//fnSetSubItem_Combo的参数分别为：
//objCombo：父项ID
//objSubCombo：子项ID
//arrSubItems：子项数组
//strDefValu：子项默认选项的value值
/*****************************************************************************/
function fnSetSubItem_Combo(objCombo,objSubCombo,arrSubItems,strDefValue){
  var i;
  var bFound;  fnClearCombo(objSubCombo);  bFound=false;
  for(i=0;i<arrSubItems.length;i++){
if(arrSubItems[i][1] + "" == objCombo.value + ""){
  var oOption = document.createElement("OPTION");
  objSubCombo.options.add(oOption);
  oOption.text = arrSubItems[i][2];
  oOption.value = arrSubItems[i][0];
  if(strDefValue + "" == oOption.value + ""){
oOption.selected=true;
  }
  bFound=true;
}
  }

  if(!bFound && objSubCombo.options.length == 0)
objSubCombo.disabled=true;
  else
objSubCombo.disabled=false;
   //alert(objSubCombo.onchange());

  if(objSubCombo.onchange)
objSubCombo.onchange();
}function fnClearCombo(objCombo){
  var i,intLen;
  //objCombo.selectedIndex=-1;
  if(objCombo.Proced ==1){
    intLen=objCombo.options.length;
    for(i=0;i<intLen-objCombo.FirstIdx;i++){
  objCombo.options[objCombo.FirstIdx]=null;
  //objCombo.options.remove(0);
    }
  }
  else{
    objCombo.FirstIdx=objCombo.options.length;
    objCombo.Proced =1;
  }
}function fnSetCityProv(objParObj,objSubObj,arrCPC){
  objSubObj.options.length=0;
  //取得当前选中的ID,递归取得所有子ID
  for(i=0;i<arrCPC.length;i++){
    if(arrCPC[i][0] == objParObj.value){
  objSubObj.options[objSubObj.options.length]=new Option(arrCPC[i][2],arrCPC[i][0]);
   }
  }  fnGetCPCSubItems(objParObj,objSubObj,arrCPC,objParObj.value,0);
}

//先根
function fnGetCPCSubItems(objParObj,objSubObj,arrCPC,intParID,intLV){
  var i;
  var strCaption;

  for(i=0;i<arrCPC.length;i++){
    if(arrCPC[i][1] == intParID){
  switch(intLV){
case 0:strCaption="  --" + arrCPC[i][2];break;
case 1:strCaption="    --" +arrCPC[i][2];break;
      }   objSubObj.options[objSubObj.options.length]=new Option(strCaption,arrCPC[i][0]);
  if(intLV <= 1)
fnGetCPCSubItems(objParObj,objSubObj,arrCPC,arrCPC[i][0],intLV+1)
}
  }
}
</script><script language="Javascript">
//生成数组函数
function fnCreateArray(intHeight,intWidth){
  var i,arrRet;
  arrRet=new Array(intHeight);//生成数组的第一维

  for(i=0;i<intHeight;i++){
    arrRet[i] = new Array(intWidth);//生成数组的第二维
  }
  return arrRet;//返回生成的数组
}//生成数组并赋值
/****第二层数组：Array-SecondLevel（数组）******/
var arrSecondLevel;
arrSecondLevel=fnCreateArray(9,3);
arrSecondLevel[0][0]="0101";//value
arrSecondLevel[0][1]="01";//父项value
arrSecondLevel[0][2]="彩电";//text
arrSecondLevel[1][0]="0102";
arrSecondLevel[1][1]="01";
arrSecondLevel[1][2]="冰箱";
arrSecondLevel[2][0]="0103";
arrSecondLevel[2][1]="01";
arrSecondLevel[2][2]="音响";arrSecondLevel[3][0]="0201";
arrSecondLevel[3][1]="02";
arrSecondLevel[3][2]="内存";
arrSecondLevel[4][0]="0202";
arrSecondLevel[4][1]="02";
arrSecondLevel[4][2]="处理器";
arrSecondLevel[5][0]="0203";
arrSecondLevel[5][1]="02";
arrSecondLevel[5][2]="显示器";
arrSecondLevel[6][0]="0204";
arrSecondLevel[6][1]="02";
arrSecondLevel[6][2]="鼠标";arrSecondLevel[7][0]="0301";
arrSecondLevel[7][1]="03";
arrSecondLevel[7][2]="书柜";
arrSecondLevel[8][0]="0302";
arrSecondLevel[8][1]="03";
arrSecondLevel[8][2]="椅子";/****第三层数组：Array-ThirdLevel（数组）******/
var arrThirdLevel;
arrThirdLevel=fnCreateArray(13,3);
arrThirdLevel[0][0]="010101";//value
arrThirdLevel[0][1]="0101";//父项value
arrThirdLevel[0][2]="长虹";//text
arrThirdLevel[1][0]="010102";
arrThirdLevel[1][1]="0101";
arrThirdLevel[1][2]="TCL";
arrThirdLevel[2][0]="010103";
arrThirdLevel[2][1]="0101";
arrThirdLevel[2][2]="创维";arrThirdLevel[3][0]="010201";
arrThirdLevel[3][1]="0102";
arrThirdLevel[3][2]="容星";
arrThirdLevel[4][0]="010202";
arrThirdLevel[4][1]="0102";
arrThirdLevel[4][2]="海尔";arrThirdLevel[5][0]="010301";
arrThirdLevel[5][1]="0103";
arrThirdLevel[5][2]="创新";
arrThirdLevel[6][0]="010302";
arrThirdLevel[6][1]="0103";
arrThirdLevel[6][2]="牙兰";arrThirdLevel[7][0]="020101";
arrThirdLevel[7][1]="0201";
arrThirdLevel[7][2]="金士顿";
arrThirdLevel[8][0]="020102";
arrThirdLevel[8][1]="0201";
arrThirdLevel[8][2]="黑金刚";arrThirdLevel[9][0]="020201";
arrThirdLevel[9][1]="0202";
arrThirdLevel[9][2]="Intel";
arrThirdLevel[10][0]="020202";
arrThirdLevel[10][1]="0202";
arrThirdLevel[10][2]="AMD";arrThirdLevel[11][0]="020301";
arrThirdLevel[11][1]="0203";
arrThirdLevel[11][2]="三星";
arrThirdLevel[12][0]="020302";
arrThirdLevel[12][1]="0203";
arrThirdLevel[12][2]="索尼";/**************初始化联动下拉框*****************/
function fnStart(){
  fnSetSubItem_Combo(document.form1.firstLevel,document.form1.secondLevel,arrSecondLevel,"0101");//第二层
  fnSetSubItem_Combo(document.form1.secondLevel,document.form1.thirdLevel,arrThirdLevel,"010101");//第三层
  //参数依次为：父项，子项，子项数组，子项默认值
  /*--三级联动初始化，分两次调用--*/
}
window.onload=fnStart;//页面载入时调用联动下拉框初始化函数
//-->
</script>
</HEAD><BODY>
<form name="form1" style="font-size:12px;">
商品：
<select name="firstLevel" onChange="fnSetSubItem_Combo(this,secondLevel,arrSecondLevel)">
  <option value="01" selected>家电</option>
  <option value="02">电脑配件</option>
  <option value="03">家居</option>
</select> 
<select name="secondLevel" onChange="fnSetSubItem_Combo(this,thirdLevel,arrThirdLevel)" style="width:150px;"></select>
<select name="thirdLevel"></select>
</BODY>
</HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">

</script>
</head><body>
<table width="37%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td>
      <div align="center">
        <select name="select2" id="se1" onChange="changes()" >
          <option selected>站长站的朋友,您所在的城市是?</option>
          <option value="浙江">浙江</option>
          <option value="湖北">湖北</option>
          <option value="湖南">湖南</option>
          <option value="陕西">陕西</option>
          <option value="河南">河南</option>
          <option value="安徽">安徽</option>
        </select>
      </div></td>
  </tr>
  <tr>
    <td>
      <div align="center">
        <select name="select" id="se2">
          <option value="站长站的朋友,你们好">站长站的朋友,你们好</option>
        </select>
      </div>
  </td>
</tr>
<tr>
  <td width="14%">
      <div align="center">
        <select name="select3" id="se3">
          <option>这里是您添加的城市</option>
        </select>
      </div></td>
</tr>
</table>
</body>
</html>

一个联动控件的实现
http://www.cnblogs.com/xuanye/archive/2007/02/07/642827.html

http://www.uschinateam.com/index.asp?order1=Articledate&yearr=&fi=118&mon=&dayy=&class1=1#20061223222208
http://www.uschinateam.com/index.asp?order1=Articledate&yearr=&fi=117&mon=&dayy=&class1=1#20061223221856
上面两个都是不错了例子。

各位大侠，我想要的不是像CSDN的那个树，是想要三个<select></select>的联动下拉列表框-------------------------------------------------
那个还比较简单呢~~随便找都有啦~~~

www.kudaa.com/downlist.asp
有个三级菜单，带数据库的。可能符合楼主的要求

个人觉得，数据库+js+dom 来解决这问题，比用ajax来好一些

gfzzspc()貌似有问题哦一直谈JS错误

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME='Generator' CONTENT='EditPlus'>
<META NAME='Author' CONTENT=''>
<META NAME='Keywords' CONTENT=''>
<META NAME='Description' CONTENT=''>
</HEAD><BODY>
<FORM METHOD=POST ACTION='Test_select_etc.html'>
Market:<SELECT NAME='ddlMarket' id='ddlMarket' onchange="processGroup('ddlGroup')"></SELECT>
<br/>
Group:<SELECT NAME='ddlGroup' id='ddlGroup'></SELECT>
</FORM>
</BODY>
<script type='text/javascript'>
var arrMarket= new Array();
var arrGroup = new Array();
var ddlMarket = document.getElementById( "ddlMarket" );
var ddlGroup = document.getElementById( "ddlGroup" );function Init()
{
//init Market
var oOption = document.createElement('OPTION');
ddlMarket.options.add( oOption);
oOption.innerText = "Please select Market " ;
for( var index= 1; index < 10;index ++ )
{
var oOption = document.createElement('OPTION');
ddlMarket.options.add( oOption);
oOption.innerText = "Market " + index;
} //init group
arrGroup[ 0] = new Array();
arrGroup[0][0]  = 'please select Group'; for( var indexMarket = 1; indexMarket < ddlMarket.options.length; indexMarket ++ )
{
arrGroup[ indexMarket ] = new Array();
arrGroup[indexMarket ][0]  = 'please select Group'; for( var indexGroup = 1 ; indexGroup < 10 ; indexGroup ++ )
{
arrGroup[indexMarket ] [ indexGroup] = ddlMarket.options[ indexMarket ] .innerText + "----" + indexGroup ;
}
} //init group select for( var index = 0; index < arrGroup[0].length; index ++ )
{
var oOption = document.createElement('OPTION');
ddlGroup.options.add( oOption );
oOption.innerText =arrGroup[0][index];
}
}
function processGroup(id)
{
var ddlMarket = window.event.srcElement;
var ddlGroup = document.getElementById( id );
for( var index = ddlGroup.length -1 ; index >= 0   ; index-- )
  {
ddlGroup.remove(index);
}
// alert( ddlMarket.selectedIndex );
for( var index = 0; index < arrGroup[ddlMarket.selectedIndex].length; index ++ )
{
var oOption = document.createElement('OPTION');
ddlGroup.options.add( oOption );
oOption.innerText =arrGroup[ddlMarket.selectedIndex][index];
}
}
Init();
</script>
</HTML>

调试易

三级连动菜单(解决后再加50分,立即结贴)

解决方案 »