用JS做三级联动，有个要求是用层来显示，并且操作对象(数组)。有完整示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function test(){
var data = {
"Aprilia": {
"RSV4 FACTORY": ["a1", "a2", "a3", "a4", "a5"],
"RSV MILLE / R": ["b1", "b2", "b3", "b4", "b5"],
"TUONO / R": ["c1", "c2", "c3", "c4", "c5"]
},

"BMW": {
"S1000RR": ["d1", "d2", "d3", "d4", "d5"],
"K1600 GT/GTL": ["e1", "e2", "e3", "e4", "e5"],
"K1300 S/R/GT": ["f1", "f2", "f3", "f4", "f5"]
},


"BUELL": {
"1125R": ["g1", "g2", "g3", "g4"],
"1125CR": ["h1", "h2", "h3", "h4"],
"XB12R": ["i1", "i2", "i3", "i4"]
}
}

/**
 * 1.用什么方法能把Aprilia,BMW,BUELL添加到<ul id="brand"><li></li></ul>中<li></li>之间
 * 2.当我选择了Aprilia，用什么方法能把RSV4 FACTORY，RSV MILLE / R，TUONO / R添加到
 * <ul id="model"><li></li></ul>中的<li></li>之间
 * 3.当选择了RSV4 FACTORY，用什么方法能把["a1", "a2", "a3", "a4", "a5"]
 * 添加到<ul id="year"><li></li></ul>中的<li></li>之间。
 * 
 * 基本思路是动态的，循环的做，但是不知道怎么操作data这个东西，求完整代码，谢谢
 */

}
</script>
</head>
<body>
<div id="div1"><ul id="brand"><li></li></ul></div>
<div id="div2"><ul id="model"><li></li></ul></div>
<div id="div3"><ul id="year"><li></li></ul></div>
</body>
</html>

解决方案 »

  1.   


     for(var item in data){  
              alert(item); 
             for(var node in data[item]){
             alert(node)
             alert((data[item])[node])
             }     
          }  
    你可以这样操作data数据 剩下的还是你自己写吧，既然你有思路，练一下还是不错的
      

  2.   

    终于做出来啦，谢谢啊
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script>
    var data = {
    "Aprilia": {
    "RSV4FACTORY": ["a1", "a2", "a3", "a4", "a5"],
    "RSVMILLER": ["b1", "b2", "b3", "b4", "b5"],
    "TUONOR": ["c1", "c2", "c3", "c4", "c5"]
    },

    "BMW": {
    "S1000RR": ["d1", "d2", "d3", "d4", "d5"],
    "K1600GTGTL": ["e1", "e2", "e3", "e4", "e5"],
    "K1300SRGT": ["f1", "f2", "f3", "f4", "f5"]
    },


    "BUELL": {
    "1125R": ["g1", "g2", "g3", "g4"],
    "1125CR": ["h1", "h2", "h3", "h4"],
    "XB12R": ["i1", "i2", "i3", "i4"]
    }
    };
    window.onload = function(){
    //var a = document.getElementById("brand").getElementsByTagName("a");
    for(var item in data)
    {  
                //alert("第1层："+item);
    var li = document.createElement("li"); 
    document.getElementById("brand").appendChild(li).innerHTML = "<a onclick=secondindex('"+item+"') href='javascript:void(0)'>"+item+"</a>";
    //alert(typeof(item));

    /*if(item == "Aprilia")
    {
    for(var node in data[item])
    {
    document.getElementById("model").innerHTML="";
    document.getElementById("year").innerHTML="";

    var li = document.createElement("li");
    document.getElementById("model").appendChild(li).innerHTML="<a>"+node+"</a>";

    if(node == "RSV4 FACTORY")
    {
    for
    }
    }
    }
    */

                /*for(var node in data[item])
    {
                    //alert("第2层："+node)
                    //alert("第3层："+(data[item])[node])
                }*/     
           }  
    }

    function secondindex(seconditem)
    {
    //清空ul下的所有子元素
    document.getElementById("model").innerHTML = "";
    document.getElementById("year").innerHTML = "";
    for(var item in data)
    {
    if (item == seconditem) 
    {
    for (var node in data[item]) 
    {
    var li = document.createElement("li");
    document.getElementById("model").appendChild(li).innerHTML = "<a onclick=thirdindex('" + node + "') href='javascript:void(0)'>" + node + "</a>";
    }
    }
    }

    }

    function thirdindex(thirditem)
    {
    document.getElementById("year").innerHTML = "";
    for(var item in data)
    {
    for(var node in data[item])
    {
    if(node == thirditem)
    {
    var li =document.createElement("li");
    document.getElementById("year").appendChild(li).innerHTML = "<a>"+data[item][node]+"</a>";
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <span id="abc">-</span><br>
    brand:<div id="div1"><ul id="brand"></ul></div><br>
    model:<div id="div2"><ul id="model"></ul></div><br>
    year:<div id="div3"><ul id="year"></ul></div><br>
    </body>
    </html>