三级连动菜单(解决后再加50分,立即结贴)
有资料如下，想用 javascript 实现三级联动下拉列表框，最好用数组方式，以后可以自行添加
01 家电
0101 彩电
010101 长虹
010102 TCL
010103 创维
0102 冰箱
010201 容星
010202 海尔
0103 音响
010301 创新
010302 牙兰
02 电脑配件
0201 内存
020101 金士顿
020102 黑金刚
0202 处理器
020201 Intel
020202 AMD
0203 显示器
020301 三星
020302 索尼
0204 鼠标
03 家居
0301 书柜
0302 椅子
[解决办法]
<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>
[解决办法]
太多了，吓人呀
[解决办法]
想了个笨方法,但是有点问题
就是在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>
==================================================
[解决办法]
<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 ">
<!--
var a1=new Array( "温州 ", "平阳 ", "乐清 ", "文成 ");
var a2=new Array( "赤壁 ", "小感 ", "相反 ");
var a3=new Array( "月样 ", "长沙 ", "张制 ");
var a31 = new Array( "张三 ", "李四 ", "王五 ");
var a4=new Array( "西按 ", "飞机 ", "大哥 ");
var a5=new Array( "郑州 ", "洛阳 ");
var a51=new Array( "高峰 ", "卫杰 ", "黄怔营 ");
var a6=new Array( "大哥 ", "安定 ", "地方 ");
function changes()
{
for(s=1;s <se1.length;s++)
{
if(se1.options[s].selected)
{
for(k=se2.length;k> -1;k--)
{
se2.options.remove(k);
}
for(m=0;m <eval( "a "+s).length;m++)//注入城市数组,eval( "a "+s)表示检测括号内的语法,将其视为正确!
{
var news=document.createElement( "option ")//为页面创建一个option对象!
news.text=eval( "a "+s)[m];//目前选项的文本值!
se2.options.add(news);//将数组注入目标下拉
if(se2.options[m].selected)
{
for(p=se3.length;p> -1;p--){
se3.options.remove(p);
}
for(t=0;t <eval( "a "+s+ "1 ").length;t++)
{
var newss=document.createElement( "option ");
newss.text=eval( "a "+s+ "1 ")[t];
se3.options.add(newss);
}
}
}
}
}
}
-->
</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>
[解决办法]
搞个关联数据库表 不就完了?
出售以下资料、代码
1.JSP编程技巧百问集锦(100个问题;一个问题一段代码) 报价：30 RMB
2.ASP编程技巧百问集锦(100个问题;一个问题一段代码) 报价：30 RMB
3.JavaScript编程技巧百问集锦(100个问题;一个问题一段代码) 报价：20 RMB
4. <在线书店系统> 大解密(jsp+javabean+servlet Web版 全套源码 安装即用) 报价：150 RMB
5. <办公自动化系统> 大解密(jsp+javabean+servlet Web版 全套源码 安装即用) 报价：300 RMB
需要者请联系:e_mail:fzlotuscn@yahoo.com.cn QQ:595563946
[解决办法]
<!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>
