支持三级下拉菜单(js)

// JavaScript Document
//调用文件

/*


<LINK href="mt_style.css" type=text/css rel=stylesheet>
<SCRIPT language=javascript src="mt_dropdownC.js"></SCRIPT>
<SCRIPT language=javascript src="mt_dropdown_initialize.js"></SCRIPT>
</head>

<body οnlοad=init();>
<table width="860" height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#E9E9E9">
  <tr>
    <td id=menu1 width="96" align="right" bgcolor="#FFFFFF" style="cursor:hand;"
 οnmοuseοver="javascript:this.style.backgroundColor='#DBEEF8';"
 οnmοuseοut="javascript:this.style.backgroundColor='';">
 <a href="#"><font class="sred">基础服务</font></a>
 <img src="images/menudot.gif" width="7" height="4" hspace="5" vspace="2">
 </td>
    <td id=menu2 width="80" align="right" bgcolor="#FFFFFF" style="cursor:hand"
 οnmοuseοver="javascript:this.style.backgroundColor='#DBEEF8';"
 οnmοuseοut="javascript:this.style.backgroundColor='';" class="sred">建站服务
 <img src="images/menudot.gif" width="7" height="4" hspace="5" vspace="2"></td>
    <td id=menu3 width="101" align="right" bgcolor="#FFFFFF" style="cursor:hand"
 οnmοuseοver="javascript:this.style.backgroundColor='#DBEEF8';"
 οnmοuseοut="javascript:this.style.backgroundColor='';"
  class="sred">电子商务实施<img src="images/menudot.gif" width="7" height="4" hspace="5" vspace="2"></td>
      </tr>
    </table>
 <script language="JavaScript" src="menus.js"></script>
</body>


*/

 


//***********************************************************************************************************

//CSS样式文件

/*

.mtDropdownMenu {
 LEFT: -1000px; OVERFLOW: hidden; POSITION: absolute; TOP: -1000px
}
.mtDropdownMenu .content {
 POSITION: absolute
}
.mtDropdownMenu .items {
 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid; POSITION: relative; TOP: 0px
}

.mtDropdownMenu .item {
 BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 12px; BORDER-LEFT: medium none; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
.mtDropdownMenu .background {
 Z-INDEX: 1; FILTER: alpha(opacity=95); LEFT: 0px; POSITION: absolute; TOP: 0px; moz-opacity: .8
}
.mtDropdownMenu .shadowRight {
 Z-INDEX: 3; FILTER: alpha(opacity=40); WIDTH: 2px; POSITION: absolute; TOP: 3px; moz-opacity: .4
}
.mtDropdownMenu .shadowBottom {
 Z-INDEX: 1; FILTER: alpha(opacity=40); LEFT: 3px; POSITION: absolute; HEIGHT: 2px; moz-opacity: .4
}
.mtDropdownMenu .hover {
 BACKGROUND: #ffffff; COLOR: #000000
}
.mtDropdownMenu .item IMG {
 MARGIN-LEFT: 5px
}


*/


//***********************************************************************************************************


//菜单文件(js)

/*

// JavaScript Document
 if (mtDropDown.isSupported()) {

  var ms = new mtDropDownSet(mtDropDown.direction.down, 0, 0, mtDropDown.reference.bottomLeft);
  
  //基础服务
  var menu1 = ms.addMenu(document.getElementById("menu1"));
  
     menu1.addItem("注册网站域名","#"); 
     var subMenu0 = menu1.addMenu(menu1.items[0]);
     subMenu0.addItem("国际域名","#");
     subMenu0.addItem("国内域名","#");
     
     menu1.addItem("购买网站空间","@");
     
     menu1.addItem("申请企业邮局","#");
     var subMenu0 = menu1.addMenu(menu1.items[2]);
     subMenu0.addItem("企业办公邮局","http://www.cnetmail.cn");
     subMenu0.addItem("海外邮局","#");
     
     menu1.addItem("网站营销推广","#");
     var subMenu0 = menu1.addMenu(menu1.items[3]);
     subMenu0.addItem("精准营销平台","http://www.cnetinfo.com");
     subMenu0.addItem("海外邮局","#");
     
    //建站服务
  var menu2 = ms.addMenu(document.getElementById("menu2"));
  
     menu2.addItem("快速品牌建站","#");
     
     menu2.addItem("低价快速建站","http://www.ewtong.cn");
     
     menu2.addItem("网站功能升级","#");
     
     menu2.addItem("网站优化改版","#");
     
         //电子商务实施
  var menu3 = ms.addMenu(document.getElementById("menu3"));
  
     menu3.addItem("电子商务实施","#");
     
     menu3.addItem("定制平台开发","@");


  mtDropDown.renderAll();
 }


*/

 

 


//***********************************************************************************************************


//mt_dropdownC.js

 //?????? web?? ???? ??? **
 var imgpath = "/images";
 
 //mtDropDown.spacerGif = imgpath+ "/rightdot.gif";
 mtDropDown.dingbatOn = imgpath+"/rightdot.gif";
 mtDropDown.dingbatOff = imgpath+"/rightdot.gif";
 mtDropDown.dingbatSize = 4;
 mtDropDown.menuPadding = 1;
 mtDropDown.itemPadding = 4;
 mtDropDown.shadowSize = 2;
 mtDropDown.shadowOffset = 3;
 mtDropDown.shadowColor = "#333333";
 //mtDropDown.shadowPng = "images/grey-40.png";
 mtDropDown.backgroundColor = "white";
 //mtDropDown.backgroundPng = "images/white-90.png";
 
 mtDropDown.hideDelay = 1000;
 mtDropDown.slideTime = 200;
 
 
 
 mtDropDown.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
 mtDropDown.direction = {down:1,right:2};
 mtDropDown.registry = [];
 mtDropDown._maxZ = 100;
 
 
 
 
 mtDropDown.isSupported = function() {
  if (typeof mtDropDown.isSupported.r == "boolean")
   return mtDropDown.isSupported.r;
  var ua = navigator.userAgent.toLowerCase();
  var an = navigator.appName;
  var r = false;
  if (ua.indexOf("gecko") > -1) r = true;
  else if (an == "Microsoft Internet Explorer") {
   if (document.getElementById) r = true;
  }
  mtDropDown.isSupported.r = r;
  return r;
 }
 
 mtDropDown.initialize = function() {
  for (var i = 0, menu = null; menu = this.registry[i]; i++) {
   menu.initialize();
  }
 }
 
 mtDropDown.renderAll = function() {
  var aMenuHtml = [];
  for (var i = 0, menu = null; menu = this.registry[i]; i++) {
   aMenuHtml[i] = menu.toString();
  }
  document.write(aMenuHtml.join(""));
 }
 
 function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet) {
 
  this.addItem = addItem;
  this.addMenu = addMenu;
  this.toString = toString;
  this.initialize = initialize;
  this.isOpen = false;
  this.show = show;
  this.hide = hide;
  this.items = [];
  
  this.onactivate = new Function();
  this.ondeactivate = new Function();
  this.onmouseover = new Function();
  this.onqueue = new Function();
  
  this.index = mtDropDown.registry.length;
  mtDropDown.registry[this.index] = this;
  var id = "mtDropDown" + this.index;
  var contentHeight = null;
  var contentWidth = null;
  var childMenuSet = null;
  var animating = false;
  var childMenus = [];
  var slideAccel = -1;
  var elmCache = null;
  var ready = false;
  var _this = this;
  var a = null;
  var pos = iDirection == mtDropDown.direction.down ? "top" : "left";
  var dim = null;
  
  function addItem(sText, sUrl) {
  var item = new mtDropDownItem(sText, sUrl, this);
  item._index = this.items.length;
  this.items[item._index] = item;
 }
 function addMenu(oMenuItem) {
  if (!oMenuItem.parentMenu == this) throw new Error("Cannot add a menu here");
  if (childMenuSet == null) childMenuSet = new mtDropDownSet(mtDropDown.direction.right, -5, 2, mtDropDown.reference.topRight);
  var m = childMenuSet.addMenu(oMenuItem);
  childMenus[oMenuItem._index] = m;
  m.onmouseover = child_mouseover;
  m.ondeactivate = child_deactivate;
  m.onqueue = child_queue;
  return m;
 }
 function initialize() {
  initCache();
  initEvents();
  initSize();
  ready = true;
 }
 function show() {
 
  if (ready) {
   _this.isOpen = true;
   animating = true;
   setContainerPos();
   elmCache["clip"].style.visibility = "visible";
   elmCache["clip"].style.zIndex = mtDropDown._maxZ++;
   
   slideStart();
   _this.onactivate();
  }
 }
 function hide() {
  if (ready) {
   _this.isOpen = false;
   animating = true;
   for (var i = 0, item = null; item = elmCache.item[i]; i++)
   dehighlight(item);
   if (childMenuSet) childMenuSet.hide();
   slideStart();
   _this.ondeactivate();
  }
 }
 function setContainerPos() {
  var sub = oActuator.constructor == mtDropDownItem;
  var act = sub ? oActuator.parentMenu.elmCache["item"][oActuator._index] : oActuator;
  var el = act;
  var x = 0;
  var y = 0;
  var minX = 0;
  var maxX = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - parseInt(elmCache["clip"].style.width);
  var minY = 0;
  var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCache["clip"].style.height);
  
  while (sub ? el.parentNode.className.indexOf("mtDropdownMenu") == -1 : el.offsetParent) {
  x += el.offsetLeft;
  y += el.offsetTop;
  if (el.scrollLeft) x -= el.scrollLeft;
  if (el.scrollTop) y -= el.scrollTop;
  el = el.offsetParent;
  }
  if (oActuator.constructor == mtDropDownItem) {
  x += parseInt(el.parentNode.style.left);
  y += parseInt(el.parentNode.style.top);
  }
  switch (iReferencePoint) {
  case mtDropDown.reference.topLeft:
  break;
  case mtDropDown.reference.topRight:
  x += act.offsetWidth;
  break;
  case mtDropDown.reference.bottomLeft:
  y += act.offsetHeight;
  break;
  case mtDropDown.reference.bottomRight:
  x += act.offsetWidth;
  y += act.offsetHeight;
  break;
  }
  x += iLeft;
  y += iTop;
  x = Math.max(Math.min(x, maxX), minX);
  y = Math.max(Math.min(y, maxY), minY);
  elmCache["clip"].style.left = x + "px";
  elmCache["clip"].style.top = y + "px";
 }
 function slideStart() {
  var x0 = parseInt(elmCache["content"].style[pos]);
  var x1 = _this.isOpen ? 0 : -dim;
  if (a != null) a.stop();
  a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel);
  a.onframe = slideFrame;
  a.onend = slideEnd;
  a.start();
 }
 function slideFrame(x) {
  elmCache["content"].style[pos] = x + "px";
 }
 function slideEnd() {
  if (!_this.isOpen) elmCache["clip"].style.visibility = "hidden";
  animating = false;
 }
 function initSize() {
 
  var ow = elmCache["items"].offsetWidth;
  var oh = elmCache["items"].offsetHeight;
  var ua = navigator.userAgent.toLowerCase();
  
  elmCache["clip"].style.width = ow + mtDropDown.shadowSize + 2 + "px";
  elmCache["clip"].style.height = oh + mtDropDown.shadowSize + 2 + "px";
  
  elmCache["content"].style.width = ow + mtDropDown.shadowSize + "px";
  elmCache["content"].style.height = oh + mtDropDown.shadowSize + "px";
  contentHeight = oh + mtDropDown.shadowSize;
  contentWidth = ow + mtDropDown.shadowSize;
  dim = iDirection == mtDropDown.direction.down ? contentHeight : contentWidth;
  
  elmCache["content"].style[pos] = -dim - mtDropDown.shadowSize + "px";
  elmCache["clip"].style.visibility = "hidden";
  
  if (ua.indexOf("mac") == -1 || ua.indexOf("gecko") > -1) {
  
   elmCache["background"].style.width = ow + "px";
   elmCache["background"].style.height = oh + "px";
   elmCache["background"].style.backgroundColor = mtDropDown.backgroundColor;
   
   elmCache["shadowRight"].style.left = ow + "px";
   elmCache["shadowRight"].style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + "px";
   elmCache["shadowRight"].style.backgroundColor = mtDropDown.shadowColor;
   
   
   
   elmCache["shadowBottom"].style.top = oh + "px";
   elmCache["shadowBottom"].style.width = ow - mtDropDown.shadowOffset + "px";
   elmCache["shadowBottom"].style.backgroundColor = mtDropDown.shadowColor;
  }
 
  else {
  
   elmCache["background"].firstChild.src = mtDropDown.backgroundPng;
   elmCache["background"].firstChild.width = ow;
   elmCache["background"].firstChild.height = oh;
   
   elmCache["shadowRight"].firstChild.src = mtDropDown.shadowPng;
   elmCache["shadowRight"].style.left = ow + "px";
   elmCache["shadowRight"].firstChild.width = mtDropDown.shadowSize;
   elmCache["shadowRight"].firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize);
   
   
   
   elmCache["shadowBottom"].firstChild.src = mtDropDown.shadowPng;
   elmCache["shadowBottom"].style.top = oh + "px";
   elmCache["shadowBottom"].firstChild.height = mtDropDown.shadowSize;
   elmCache["shadowBottom"].firstChild.width = ow - mtDropDown.shadowOffset;
  }
 }
 function initCache() {
  var menu = document.getElementById(id);
  var all = menu.all ? menu.all : menu.getElementsByTagName("*");
  elmCache = {};
  elmCache["clip"] = menu;
  elmCache["item"] = [];
  for (var i = 0, elm = null; elm = all[i]; i++) {
   switch (elm.className) {
    case "items":
    case "content":
    case "background":
    case "shadowRight":
    case "shadowBottom":
    elmCache[elm.className] = elm;
    break;
    case "item":
    elm._index = elmCache["item"].length;
    elmCache["item"][elm._index] = elm;
    break;
   }
  }
 
  _this.elmCache = elmCache;
 }
 
 function initEvents() {
 
  for (var i = 0, item = null; item = elmCache.item[i]; i++) {
   item.onmouseover = item_mouseover;
   
   item.onmouseout = item_mouseout;
   item.onclick = item_click;
  }
  
  if (typeof oActuator.tagName != "undefined") {
   oActuator.onmouseover = actuator_mouseover;
   oActuator.onmouseout = actuator_mouseout;
  }
  
  elmCache["content"].onmouseover = content_mouseover;
  elmCache["content"].onmouseout = content_mouseout;
 }
 function highlight(oRow) {
  oRow.className = "item hover";
  if (childMenus[oRow._index])
  oRow.lastChild.firstChild.src = mtDropDown.dingbatOn;
 }
 
 function dehighlight(oRow) {
  oRow.className = "item";
  if (childMenus[oRow._index])
  oRow.lastChild.firstChild.src = mtDropDown.dingbatOff;
 }
 function item_mouseover() {
  if (!animating) {
   highlight(this);
   if (childMenus[this._index])
    childMenuSet.showMenu(childMenus[this._index]);
   else if (childMenuSet) childMenuSet.hide();
  }
 }
 function item_mouseout() {
  if (!animating) {
   if (childMenus[this._index])
    childMenuSet.hideMenu(childMenus[this._index]);
   else
    dehighlight(this);
  }
 }
 function item_click() {
  if (!animating) {
   if (_this.items[this._index].url)
    location.href = _this.items[this._index].url;
  }
 }
 function actuator_mouseover() {
  parentMenuSet.showMenu(_this);
  
 }
 function actuator_mouseout() {
  parentMenuSet.hideMenu(_this);
 }
 function content_mouseover() {
  if (!animating) {
   parentMenuSet.showMenu(_this);
   _this.onmouseover();
  }
 }
 function content_mouseout() {
  if (!animating) {
   parentMenuSet.hideMenu(_this);
  }
 }
 function child_mouseover() {
  if (!animating) {
   parentMenuSet.showMenu(_this);
  }
 }
 function child_deactivate() {
  for (var i = 0; i < childMenus.length; i++) {
   if (childMenus[i] == this) {
    dehighlight(elmCache["item"][i]);
    break;
   }
  }
 }
 function child_queue() {
  parentMenuSet.hideMenu(_this);
  
 }
 function toString() {
  
  var aHtml = [];
  var sClassName = "mtDropdownMenu" + (oActuator.constructor != mtDropDownItem ? " top" : "");
  for (var i = 0, item = null; item = this.items[i]; i++) {
   aHtml[i] = item.toString(childMenus[i]);
  }
  return '<div id="' + id + '" class="' + sClassName + '">' +
  '<div class="content"><table class="items" cellpadding="0" cellspacing="0" border="0" width="97">' +
  '<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr>' +
  aHtml.join('') +
  '<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr></table>' +
  '<div class="shadowBottom"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
  '<div class="shadowRight"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
  '<div class="background"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
  '</div></div>';
  }
 }
 
 
 
 
 
 
 
 
 mtDropDownSet.registry = [];
 
 function mtDropDownSet(iDirection, iLeft, iTop, iReferencePoint) { 
 this.addMenu = addMenu;
 this.showMenu = showMenu;
 this.hideMenu = hideMenu;
 this.hide = hide;
 
 var menus = [];
 var _this = this;
 var current = null;
 this.index = mtDropDownSet.registry.length;
 mtDropDownSet.registry[this.index] = this;
 
 function addMenu(oActuator) {
 var m = new mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, this);
 menus[menus.length] = m;
 return m;
 }
 function showMenu(oMenu) {
 if (oMenu != current) {
 
 if (current != null) hide(current);
 
 current = oMenu;
 
 oMenu.show();
 }
 else {
 
 cancelHide(oMenu);
 }
 }
 function hideMenu(oMenu) {
 
 if (current == oMenu && oMenu.isOpen) {
 
 if (!oMenu.hideTimer) scheduleHide(oMenu);
 }
 }
 function scheduleHide(oMenu) {
 
 oMenu.onqueue();
 oMenu.hideTimer = window.setTimeout("mtDropDownSet.registry[" + _this.index + "].hide(mtDropDown.registry[" + oMenu.index + "])", mtDropDown.hideDelay);
 }
 function cancelHide(oMenu) {
 
 if (oMenu.hideTimer) {
 window.clearTimeout(oMenu.hideTimer);
 oMenu.hideTimer = null;
 }
 }
 function hide(oMenu) {
 if (!oMenu && current) oMenu = current;
 if (oMenu && current == oMenu && oMenu.isOpen) {
 
 cancelHide(oMenu);
 current = null;
 oMenu.hideTimer = null;
 oMenu.hide();
 }
 }
 }
 
 function mtDropDownItem(sText, sUrl, oParent) {
 this.toString = toString;
 this.text = sText;
 this.url = sUrl;
 this.parentMenu = oParent;
 function toString(bDingbat) {
 var sDingbat = bDingbat ? mtDropDown.dingbatOff : mtDropDown.spacerGif;
 var iEdgePadding = mtDropDown.itemPadding + 3; //mtDropDown.menuPadding;
 var sPaddingLeft = "padding:" + mtDropDown.itemPadding + "px; padding-left:" + iEdgePadding + "px;"
 var sPaddingRight = "padding:" + mtDropDown.itemPadding + "px; padding-right:" + iEdgePadding + "px;"
 return '<tr class="item"><td nowrap style="' + sPaddingLeft + '">' +
 sText + '</td><td width="4" style="' + sPaddingRight + '">' + //
 '<img src="' + sDingbat + '" width="4" height="9">'+
 '</td></tr>';
 }
 }
 
 
 function Accelimation(from, to, time, zip) {
 if (typeof zip == "undefined") zip = 0;
 if (typeof unit == "undefined") unit = "px";
 this.x0 = from;
 this.x1 = to;
 this.dt = time;
 this.zip = -zip;
 this.unit = unit;
 this.timer = null;
 this.onend = new Function();
 this.onframe = new Function();
 }
 
 Accelimation.prototype.start = function() {
 this.t0 = new Date().getTime();
 this.t1 = this.t0 + this.dt;
 var dx = this.x1 - this.x0;
 this.c1 = this.x0 + ((1 + this.zip) * dx / 3);
 this.c2 = this.x0 + ((2 + this.zip) * dx / 3);
 Accelimation._add(this);
 }
 
 Accelimation.prototype.stop = function() {
 Accelimation._remove(this);
 }
 
 
 
 
 Accelimation.prototype._paint = function(time) {
 if (time < this.t1) {
 var elapsed = time - this.t0;
 this.onframe(Accelimation._getBezier(elapsed/this.dt,this.x0,this.x1,this.c1,this.c2));
 }
 else this._end();
 }
 
 Accelimation.prototype._end = function() {
 Accelimation._remove(this);
 this.onframe(this.x1);
 this.onend();
 }
 
 
 
 
 Accelimation._add = function(o) {
 var index = this.instances.length;
 this.instances[index] = o;
 
 if (this.instances.length == 1) {
 this.timerID = window.setInterval("Accelimation._paintAll()", this.targetRes);
 }
 }
 
 Accelimation._remove = function(o) {
 for (var i = 0; i < this.instances.length; i++) {
 if (o == this.instances[i]) {
 this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
 break;
 }
 }
 
 if (this.instances.length == 0) {
 window.clearInterval(this.timerID);
 this.timerID = null;
 }
 }
 
 Accelimation._paintAll = function() {
 var now = new Date().getTime();
 for (var i = 0; i < this.instances.length; i++) {
 this.instances[i]._paint(now);
 }
 }
 
 Accelimation._B1 = function(t) { return t*t*t }
 Accelimation._B2 = function(t) { return 3*t*t*(1-t) }
 Accelimation._B3 = function(t) { return 3*t*(1-t)*(1-t) }
 Accelimation._B4 = function(t) { return (1-t)*(1-t)*(1-t) }
 
 Accelimation._getBezier = function(percent,startPos,endPos,control1,control2) {
 return endPos * this._B1(percent) + control2 * this._B2(percent) + control1 * this._B3(percent) + startPos * this._B4(percent);
 }
 
 
 
 Accelimation.instances = [];
 Accelimation.targetRes = 10;
 Accelimation.timerID = null;
 
 
 

//***********************************************************************************************************


//mt_dropdown_initialize.js文件
 

  var preloaded = [];

  // here is a lame preloading script i am putting in just for demonstration
  for (var i = 1; i <= 6; i++) {
   preloaded[i] = [loadImage(i + "-0.gif"), loadImage(i + "-1.gif")];
  }

  function init() {
   //alert(11111111);
  
   // whatever stuff you need to do onload goes here.

   //==========================================================================================
   // if supported, initialize mtdropdowns
   //==========================================================================================
   // Check isSupported() so that menus aren't accidentally sent to non-supporting browsers.
   // This is better than server-side checking because it will also catch browsers which would
   // normally support the menus but have javascript disabled.
   //
   // If supported, call initialize() and then hook whatever image rollover code you need to do
   // to the .onactivate and .ondeactivate events for each menu.
   //==========================================================================================
   if (mtDropDown.isSupported()) {
    mtDropDown.initialize();
   }
  }

  // this is a crappy example preloader. Use whichever one you want.
  function loadImage(sFilename) {
   var img = new Image();
   img.src ="../images/" + sFilename;
   return img;
  }

  // this is a crappy example image swapper. Use whichever you want.
  function swapImage(imgName, sFilename) {
   document.images[imgName].src = sFilename;
  } 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
下面是一个简单的三级下拉菜单的实现示例: HTML代码: ``` <select id="province"> <option value="">请选择省份</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广东</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择区县</option> </select> ``` JavaScript代码: ``` // 省份数据 var provinceData = [{ id: 1, name: "北京", cityData: [{ id: 101, name: "北京市", areaData: [{ id: 10101, name: "东城区" }, { id: 10102, name: "西城区" }, { id: 10103, name: "朝阳区" }] }] }, { id: 2, name: "上海", cityData: [{ id: 201, name: "上海市", areaData: [{ id: 20101, name: "黄浦区" }, { id: 20102, name: "徐汇区" }, { id: 20103, name: "长宁区" }] }] }, { id: 3, name: "广东", cityData: [{ id: 301, name: "广州市", areaData: [{ id: 30101, name: "天河区" }, { id: 30102, name: "白云区" }, { id: 30103, name: "海珠区" }] }, { id: 302, name: "深圳市", areaData: [{ id: 30201, name: "福田区" }, { id: 30202, name: "罗湖区" }, { id: 30203, name: "南山区" }] }] }]; // 绑定省份下拉框的change事件 document.getElementById("province").addEventListener("change", function() { var provinceId = this.value; var citySelect = document.getElementById("city"); var areaSelect = document.getElementById("area"); // 清空城市和区县下拉框 citySelect.innerHTML = '<option value="">请选择城市</option>'; areaSelect.innerHTML = '<option value="">请选择区县</option>'; // 根据选择的省份动态加载城市下拉框 if (provinceId) { for (var i = 0; i < provinceData.length; i++) { if (provinceData[i].id == provinceId) { for (var j = 0; j < provinceData[i].cityData.length; j++) { var cityOption = document.createElement("option"); cityOption.value = provinceData[i].cityData[j].id; cityOption.innerHTML = provinceData[i].cityData[j].name; citySelect.appendChild(cityOption); } break; } } } }); // 绑定城市下拉框的change事件 document.getElementById("city").addEventListener("change", function() { var cityId = this.value; var areaSelect = document.getElementById("area"); // 清空区县下拉框 areaSelect.innerHTML = '<option value="">请选择区县</option>'; // 根据选择的城市动态加载区县下拉框 if (cityId) { for (var i = 0; i < provinceData.length; i++) { for (var j = 0; j < provinceData[i].cityData.length; j++) { if (provinceData[i].cityData[j].id == cityId) { for (var k = 0; k < provinceData[i].cityData[j].areaData.length; k++) { var areaOption = document.createElement("option"); areaOption.value = provinceData[i].cityData[j].areaData[k].id; areaOption.innerHTML = provinceData[i].cityData[j].areaData[k].name; areaSelect.appendChild(areaOption); } break; } } } } }); ``` 说明: 1. 首先定义一个省份数据的数组,包含省份、城市和区县数据。 2. 在HTML中定义三个下拉框,分别为省份、城市和区县。省份下拉框默认加载所有省份数据,城市和区县下拉框默认为空。 3. 绑定省份下拉框的change事件,根据选择的省份动态加载城市下拉框,清空区县下拉框。 4. 绑定城市下拉框的change事件,根据选择的城市动态加载区县下拉框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值