zoukankan      html  css  js  c++  java
  • 制作IE和FF都支持的无限级关联菜单

    <!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>三级关联菜单(美工版)</title>
    </head>
    <body>
    <select name="sel1" id="sel1"   target='sel2' data='sel3' onchange="t(this)" event='true'>
    <!-- target 表示下级菜单显示的select的ID名称 -->
    <!-- data  表示下级菜单显示的数据select的ID名称-->
    <!-- event   表示是不是还有下级菜单-->
    <!-- 原理 下级菜单的optgroup的label的文字和选择的文字对应,然后显示出来-->
    <!-- 如果你要制作2级菜单 需要 三个select 二个是显示 还有一个是存放显示的数据-->
    <!-- 本例中 显示三级菜单 需要 七个select 四个是显示 三个是数据-->
    <!-- 记得把后面的脚本放在网页中,注意:不要放在<head></head>中就行-->
    <!-- 如果你有不明白地方 加我QQ:628558或MSN:shqlsl@hotmail.com 时间:2006年9月16日上午-->

       <option value="浙江省" selected="selected">浙江省</option>
       <option value="福建省">福建省</option>
    </select>
    <select name="sel2" id="sel2" target='sel4' data='sel5' event='true'>
       <option value="" selected="selected">请选择</option>
    </select>
    <select name="sel3" id="sel3">
    <optgroup label="浙江省">
       <option value="杭州" selected="selected">杭州</option>
       <option value="温州">温州</option>
       <option value="台州">台州</option>
       <option value="宁波">宁波</option>
       </optgroup>
    <optgroup label="福建省">
       <option value="福州">福州</option>
       <option value="泉州">泉州</option>
       <option value="漳州">漳州</option>
       </optgroup>
    </select>
    <select name="sel4" id="sel4" target='sel6' data='sel7'>
       <option value="" selected="selected">请选择</option>
    </select>
    <select name="sel5" id="sel5">
    <optgroup label="杭州">
       <option value="下城区" selected="selected">下城区</option>
       <option value="上城区">上城区</option>
       <option value="江干区">江干区</option>
       </optgroup>
       <optgroup label="温州">
       <option value="鹿城区">鹿城区</option>
       <option value="龙湾区">龙湾区</option>
       <option value="泉州">泉州</option>
       <option value="漳州">漳州</option>
       </optgroup>
    <optgroup label="福州">
       <option value="鼓楼区">鼓楼区</option>
       <option value="台江区">台江区</option>
       <option value="仓山区">仓山区 </option>
       <option value="晋安区">马尾区</option>
       </optgroup>
    <optgroup label="泉州">
       <option value="晋江">晋江</option>
       <option value="石狮">石狮</option>
       <option value="永春">永春</option>
       </optgroup>
    </select>
    <select name="sel6" id="sel6" >
       <option value="" selected="selected">请选择</option>
    </select>
    <select name="sel7" id="sel7">
       <optgroup label="下城区">
       <option value="体育场路" selected="selected">体育场路</option>
       <option value="朝晖路">朝晖路</option>
       <option value="建国北路">建国北路</option>
       </optgroup>
       <optgroup label="上城区">
       <option value="吴山广场">吴山广场</option>
       <option value="平海路">平海路</option>
       <option value="清泰路">清泰路</option>
       </optgroup>
       <optgroup label="石狮">
       <option value="宝盖镇">宝盖镇</option>
       <option value="灵秀镇">灵秀镇</option>
       <option value="锦尚镇">锦尚镇</option>
       </optgroup>
    </select>
    <script type="text/javascript">
        var shqlsl={};
        shqlsl.$=function(o){return typeof(o)=="string"?document.getElementById(o):o;}
        shqlsl.isIE=document.all;
        if(!shqlsl.isIE)
        HTMLElement.prototype.attachEvent=function(type,foo){this.addEventListener(type.slice(2),foo,false)}
        shqlsl.$opt=function(o,t){var opts=o.getElementsByTagName('optgroup');for(var i=0;i<opts.length;i++){if(opts[i].label==t)return opts[i];}}
        shqlsl.hidsel=function(){var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++){var d=sel[i].getAttribute('data');if(d!=null){shqlsl.$(d).style.display='none';}}};
        if(shqlsl.isIE)
        window.attachEvent("onload",shqlsl.hidsel);
        else
        window.addEventListener("load",shqlsl.hidsel,false);
       function t(ev)
       {
       var ev=ev||window.event.srcElement;
       var ss=shqlsl.$(ev.getAttribute('target'));/*选择以后会显示给的对象*/       
       var s=shqlsl.$(ev.getAttribute('data'));/*隐藏的子菜单*/
       var stxt=ev.options[ev.selectedIndex].text;/*选择第几项*/
       if(ev.getAttribute('event')=='true')
       ss.attachEvent("onchange",function(){if(shqlsl.isIE){t()}else{t(this)}})
       ss.innerHTML="";
       try{
       var o=shqlsl.$opt(s,stxt).cloneNode(true);
       ss.appendChild(o);
       }catch(e){}
       }
        </script>
    </body>
    </html>
  • 相关阅读:
    547. Friend Circles
    399. Evaluate Division
    684. Redundant Connection
    327. Count of Range Sum
    LeetCode 130 被围绕的区域
    LeetCode 696 计数二进制子串
    LeetCode 116 填充每个节点的下一个右侧节点
    LeetCode 101 对称二叉树
    LeetCode 111 二叉树最小深度
    LeetCode 59 螺旋矩阵II
  • 原文地址:https://www.cnblogs.com/see7di/p/2240030.html
Copyright © 2011-2022 走看看