层模拟下拉联动不好用。

用 getAttribute("val") 可以取得自定属性的值。

解决方案 »

  1.   

    <!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>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            } #bodd {
                float: left;
                width: 1001px;
                height: 400px;
                background-color: #CCCCCC;
            } #top {
                float: left;
            } #search_select {
                float: left;
                width: 200px;
                height: 20px;
                background-color: #FFFFFF;
                cursor: text;
            } #textdiv {
                float: left;
                width: 200px;
                height: 20px;
                border: 1px solid #FFFFFF;
            } #textdiv_1 {
                float: left;
                width: 323px;
                height: 135px;
                border: 2px solid #FFFF66;
                position: absolute;
                left: 20px;
                top: 20px;
                display: block;
            }
        </style>
        <body>
            <div id="bodd">
                <div id="textdiv">
                    <div id="search_select">
                        所有类目 
                    </div>
                    <div id="textdiv_1">
                        <ul>
                            <li><a href="#" val="202">互联网 </a></li>
                            <li><a href="#" val="212">影音娱乐 </a></li>
                            <li><a href="#" val="211">门户网站 </a></li>
                            <li><a href="#" val="206">生活资讯 </a></li>
                            <li><a href="#" val="0" class="border">所有类目 </a></li>
                        </ul>
                    </div>
                    <div id="Selectcomputerdiv">
                        <SELECT NAME="ddd">
                            <OPTION VALUE="aa" SELECTED> 计算机</option>
                        </SELECT>
                    </div>
                    <div id="Selectwebdiv">
                        <SELECT NAME="ddd">
                            <OPTION VALUE="aa" SELECTED> 网站</option>
                        </SELECT>
                    </div>
                </div>
            </div>
            <script>
                var $d = document;
                function $i(s){
                    return $d.getElementById(s);
                }
                
                function Showdiv(obj, val){
                    var list = $i('textdiv_1');
                    list.style.display = val;
                }
                
                function Showssdiv(val){
                    var list = $i('Selectdiv');
                    list.style.display = val;
                }
                
                function asd(){
                    var as = document.getElementById("textdiv_1").getElementsByTagName("a"); //获得链接数组
                    for (var i = 0; i < as.length; i++) {
                        as[i].onclick = function(){
                            var sel = $i("search_select");
                            sel.setAttribute("val", this.getAttribute("val"));
                            alert(sel.getAttribute("val"));
                            sel.innerHTML = event.srcElement.innerHTML;
                            sel.style.color = "#000";
                            Showdiv(null, "none");
                       }
                    }
                }
            </script>
            <script>
                asd();
            </script>
        </body>
    </html>
      

  2.   

    你这需求和代码也太乱了
    费了半天的劲才理清头绪来。<!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>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            } #bodd {
                float: left;
                width: 1001px;
                height: 400px;
                background-color: #CCCCCC;
            } #top {
                float: left;
            } #search_select {
                float: left;
                width: 200px;
                height: 20px;
                background-color: #FFFFFF;
                cursor: text;
            } #textdiv {
                float: left;
                width: 200px;
                height: 20px;
                border: 1px solid #FFFFFF;
            } #textdiv_1 {
                float: left;
                width: 323px;
                height: 135px;
                border: 2px solid #FFFF66;
                position: absolute;
                left: 20px;
                top: 100px;
                display: block;
            }
        </style>
        <body>
            <div id="bodd">
                <div id="textdiv">
                    <div id="search_select">
                        所有类目 
                    </div>
                    <div id="textdiv_1">
                        <ul>
                            <li>
                                <a href="#" val="202">互联网 </a>
                            </li>
                            <li>
                                <a href="#" val="212">影音娱乐 </a>
                            </li>
                            <li>
                                <a href="#" val="211">门户网站 </a>
                            </li>
                            <li>
                                <a href="#" val="206">生活资讯 </a>
                            </li>
                            <li>
                                <a href="#" val="0" class="border">所有类目 </a>
                            </li>
                        </ul>
                    </div>
                    <div id="Selectcomputerdiv" style="display:none;">
                        <SELECT NAME="ddd">
                            <OPTION VALUE="aa" SELECTED>计算机</option>
                        </SELECT>
                    </div>
                    <div id="Selectwebdiv" style="display:none;">
                        <SELECT NAME="ddd">
                            <OPTION VALUE="aa" SELECTED>网站</option>
                        </SELECT>
                    </div>
                </div>
            </div>
            <script>
                var $d = document;
                function $i(s){
                    return $d.getElementById(s);
                }
                
                function Showdiv(obj, val){
                    obj.style.display = val;
                }
                
                function asd(){
                    var as = document.getElementById("textdiv_1").getElementsByTagName("a"); //获得链接数组
                    for (var i = 0; i < as.length; i++) {
                        as[i].onclick = function(){
                            var sel = $i("search_select");
                            var val = this.getAttribute("val");
                            sel.setAttribute("val", val);
                            if (val == "202") {
                                Showdiv($i("Selectwebdiv"), "");
                                Showdiv($i("Selectcomputerdiv"), "none");
                            }
                            else 
                                if (val == "211") {
                                    Showdiv($i("Selectwebdiv"), "none");
                                    Showdiv($i("Selectcomputerdiv"), "");
                                }
                                else {
                                    Showdiv($i("Selectwebdiv"), "none");
                                    Showdiv($i("Selectcomputerdiv"), "none");
                                }
                            sel.innerHTML = event.srcElement.innerHTML;
                            sel.style.color = "#000";
                        }
                    }
                }
            </script>
            <script>
                asd();
            </script>
        </body>
    </html>