有2级分类,第一级分类放在下拉列表框DropList1里面,需要的效果是:我在下拉列表框中选择第一级分类,动态的显示一个checkbox组,内容是第二级分类,可以多选,并且第一级分类不同,第二级分类也不同,动态改变第二级分类(第一级分类和第二级分类是在数据库里面读取的)。很急,请各位大虾帮帮忙!谢谢了!在线等!

解决方案 »

  1.   

    不用AJAX 的话先把数据Load 到页面!现在JS 操作!
      

  2.   

    一个Demo<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
            //data
            var data = {one:[{value:11,title:'test11'},{value:12,title:'test12'}],two:[{value:21,title:'test21'},{value:22,title:'test22'}],three:[{value:31,title:'test31'},{value:32,title:'test32'}]};        function init() {
                var sel = document.createElement('select');
                for (var id in data) { //这里用,你根据自己的需求修改
                    sel.options.add(new Option(id, id));
                }
    sel.onchange = function (){ changeTwo(sel.value)};
                document.body.appendChild(sel);
                changeTwo(sel.value);
            }        function changeTwo(id) {
                var div = document.getElementById('content');
                if (!div) {
                    div = document.createElement('div');
                    div.id = 'content';
                    document.body.appendChild(div);
                }
                var con = '';
                var t = data[id];
                for (var i = 0; i < t.length; i++) {
                    con += '<input type="checkbox" value="' + t[i].value + '"/>' + t[i].title;
                }
                div.innerHTML = con;
            }
        </script>
    </head>
    <body onload="init()">
    </body>
    </html>
      

  3.   


    <html>
    <head></head>
    <body>
    <div id="ss"></div>
    </body>
    <script>
        var menu = [ 
          {"menu1":"人族","menu2":[
                                    {"menu1":"大法师","menu2":[
                                                                {"menu1":"水元素"},
                                                                  {"menu1":"暴风雪"},
                                                                {"menu1":"辉煌光环"},
                                                                {"menu1":"瞬间移动"}
                                                                ]},
                                    {"menu1":"山丘之王","menu2":[
                                                                {"menu1":"风暴之锤"},
                                                                  {"menu1":"锥地"},
                                                                {"menu1":"锥晕"},
                                                                {"menu1":"天神下凡"}
                                                                ]},
                                    {"menu1":"圣骑士","menu2":[
                                                                {"menu1":"光"},
                                                                  {"menu1":"无敌"},
                                                                {"menu1":"光环"},
                                                                {"menu1":"复活"}
                                                                ]},
                                    {"menu1":"血法师","menu2":[
                                                                {"menu1":"火焰"},
                                                                  {"menu1":"吸蓝"},
                                                                {"menu1":"虚无"},
                                                                {"menu1":"神鸟凤凰"}
                                                                ]}
                                    ]},
          {"menu1":"兽族","menu2":[
                                    {"menu1":"贱圣","menu2":[
                                                                {"menu1":"疾风步"},
                                                                  {"menu1":"影分身"},
                                                                {"menu1":"致命一击"},
                                                                {"menu1":"剑刃风暴"}
                                                                ]},
                                    {"menu1":"先知男","menu2":[
                                                                {"menu1":"狼"},
                                                                  {"menu1":"日"},
                                                                {"menu1":"闪电链"},
                                                                {"menu1":"地震"}
                                                                ]},
                                    {"menu1":"牛头人酋长","menu2":[
                                                                {"menu1":"冲击波"},
                                                                  {"menu1":"阵地"},
                                                                {"menu1":"耐久光环"},
                                                                {"menu1":"复活"}
                                                                ]},
                                    {"menu1":"小YY","menu2":[
                                                                {"menu1":"变动物"},
                                                                  {"menu1":"治疗波"},
                                                                {"menu1":"小蛇棒子"},
                                                                {"menu1":"全体无敌"}
                                                                ]}
                                    ]},
          {"menu1":"不死族","menu2":[
                                    {"menu1":"死亡骑士","menu2":[
                                                                {"menu1":"大便"},
                                                                  {"menu1":"光环"},
                                                                {"menu1":"吃人"},
                                                                {"menu1":"复尸体"}
                                                                ]},
                                    {"menu1":"巫妖","menu2":[
                                                                {"menu1":"暴冰"},
                                                                  {"menu1":"冰甲"},
                                                                {"menu1":"吃人"},
                                                                {"menu1":"死亡凋零"}
                                                                ]},
                                    {"menu1":"恐惧魔王","menu2":[
                                                                {"menu1":"蝙蝠"},
                                                                  {"menu1":"睡觉"},
                                                                {"menu1":"吸血光环"},
                                                                {"menu1":"黄色石头人"}
                                                                ]},
                                    {"menu1":"小强王子","menu2":[
                                                                {"menu1":"小小强"},
                                                                  {"menu1":"倒刺"},
                                                                {"menu1":"身上长倒刺"},
                                                                {"menu1":"很多小小强"}
                                                                ]}
                                    ]}
       ]   
    for(var i=0;i<3;i++)
      {
        var sele =document.createElement("select")
        document.getElementById("ss").appendChild(sele)
      }
      for(var j=0;j<menu.length;j++)
      {document.getElementById("ss").getElementsByTagName("select")[0].options.add(new Option(menu[j].menu1,j))
       document.getElementById("ss").getElementsByTagName("select")[0].onchange=function(){change(this.selectedIndex)}
      }
      
        for(var j=0;j<menu[0].menu2.length;j++)
      {document.getElementById("ss").getElementsByTagName("select")[1].options.add(new Option(menu[0].menu2[j].menu1,j))
       document.getElementById("ss").getElementsByTagName("select")[1].onchange=function(){xchange(this.selectedIndex)}
      }
      
          for(var j=0;j<menu[0].menu2[0].menu2.length;j++)
      {document.getElementById("ss").getElementsByTagName("select")[2].options.add(new Option(menu[0].menu2[0].menu2[j].menu1,j))}
      
    function change(num){
    document.getElementById("ss").getElementsByTagName("select")[1].length=0
    document.getElementById("ss").getElementsByTagName("select")[2].length=0
    for(var i=0;i<menu[num].menu2.length;i++)
    {document.getElementById("ss").getElementsByTagName("select")[1].options.add(new Option(menu[num].menu2[i].menu1,i))}
    for(var i=0;i<menu[num].menu2[0].menu2.length;i++)
    {document.getElementById("ss").getElementsByTagName("select")[2].options.add(new Option(menu[num].menu2[0].menu2[i].menu1,i))}
    }function xchange(num){
    document.getElementById("ss").getElementsByTagName("select")[2].length=0
    var num0= document.getElementById("ss").getElementsByTagName("select")[0].selectedIndex
    for(var i=0;i<menu[num0].menu2[num].menu2.length;i++)
    {document.getElementById("ss").getElementsByTagName("select")[2].options.add(new Option(menu[num0].menu2[num].menu2[i].menu1,i))}
    }
    </script>
    </html>lz参考一下吧.
      

  4.   

    用 xmlhttp或如果数据不多的话,先加载到页面上也可以.