求指点一个实现三级下拉框的Jquery或Ajax脚本（已有JSON数据）

数据都返回了，剩下的就是处理json了吧

解决方案 »

  1.   

    http://runjs.cn/code/epnycgwn
    <!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>
    <style type="text/css">
    body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
    a{ color:#006600; text-decoration:none;}
    a:hover{color:#990000;}
    .top{ margin:5px auto; color:#990000; text-align:center;}
    .info select{ border:1px #993300 solid; background:#FFFFFF;}
    .info{ margin:5px; text-align:center;}
    .info #show{ color:#3399FF; }
    .bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;}
    </style>
    </head>
    <body>
    <div class="top">
    <h1>全国城市三级联动</h1>
    </div>
    <div class="info">
    <div>
    <select id="s_province" name="s_province"></select>  
        <select id="s_city" name="s_city" ></select>  
        <select id="s_county" name="s_county"></select>
        <script class="resources library" src="http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/area.js" type="text/javascript"></script>
        
        <script type="text/javascript">_init_area();</script>
        </div>
        <div id="show"></div>
    </div>
    <script type="text/javascript">
    var Gid  = document.getElementById ;
    var showArea = function(){
    Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 
    Gid('s_city').value + " - 县/区" + 
    Gid('s_county').value + "</h3>"
    }
    Gid('s_county').setAttribute('onchange','showArea()');
    </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>
        <title>列表框中事件应用</title>
        <script type="text/javascript" 
                src="Jscript/jquery-1.4.2-vsdoc.js">
        </script>
        <script type="text/javascript" 
                src="Jscript/jquery-1.4.2.js">
        </script>
        <style type="text/css">
               body{font-size:13px}
               .clsInit{width:435px;height:35px;line-height:35px;padding-left:10px} 
               .clsTip{padding-top:5px;background-color:#eee;display:none} 
               .btn {border:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;
               filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
        </style> 
      <script type="text/javascript">
          $(function() {
              function objInit(obj) {//下拉列表框初始化
                  return $(obj).html("<option>请选择</option>");
              }
              var arrData = { //定义一个数组保存相关数据
                  厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
                  厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
                  厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
              };          $.each(arrData, function(pF) { //遍历数据增加厂商项
                  $("#selF").append("<option>" + pF + "</option>");
              });          $("#selF").change(function() { //厂商列表框选项改变事件
                  objInit("#selT");
                  objInit("#selC");              $.each(arrData, function(pF, pS) {
                      if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配                      $.each(pS, function(pT, pC) { //遍历数据增加品牌项
                              $("#selT").append("<option>" + pT + "</option>");
                          });                      $("#selT").change(function() { //品牌列表框选项改变事件
                              objInit("#selC");
                              $.each(pS, function(pT, pC) {                              if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配                                  $.each(pC.split(","), function() { //遍历数据增加型号项
                                          $("#selC").append("<option>" + this + "</option>");
                                      });
                                  }
                              });
                          });                  }
                  });
              });          $("#Button1").click(function() { //注册按钮单击事件
                  var strValue = "您选择的厂商:";
                  strValue += $("#selF option:selected").text();
                  strValue += "&nbsp;您选择的品牌:";
                  strValue += $("#selT option:selected").text();
                  strValue += "&nbsp;您选择的型号:";
                  strValue += $("#selC option:selected").text();
                  $("#divTip")
                  .show()
                  .addClass("clsTip")
                  .html(strValue); //显示提示信息并增加样式
              });
          })
           </script> 
    </head>
    <body>
         <div class="clsInit">
           厂商：<select id="selF"><option>请选择</option></select>  
           品牌：<select id="selT"><option>请选择</option></select>  
           型号：<select id="selC"><option>请选择</option></select> 
           <input id="Button1" type="button" value="查询" class="btn" />
        </div> 
        <div class="clsInit" id="divTip"></div>
    </body>
    </html>
      

  3.   


    冒昧问下，这里的pF,pT,pC哪里来的？
      

  4.   


    冒昧问下，这里的pF,pT,pC哪里来的？下边3个下拉选的ID。
      

  5.   


    冒昧问下，这里的pF,pT,pC哪里来的？下边3个下拉选的ID。
    是遍历时候的当前值，
      

  6.   


    冒昧问下，这里的pF,pT,pC哪里来的？下边3个下拉选的ID。
    是遍历时候的当前值，我试了一下您的代码，下拉框的内容没有加载进来，三个框都没有内容
      

  7.   


    冒昧问下，这里的pF,pT,pC哪里来的？下边3个下拉选的ID。
    是遍历时候的当前值，我试了一下您的代码，下拉框的内容没有加载进来，三个框都没有内容
    哥们你有加jquery的包吗 这个是可以运行的，我给你写个吧 一会
      

  8.   


    冒昧问下，这里的pF,pT,pC哪里来的？下边3个下拉选的ID。
    是遍历时候的当前值，我试了一下您的代码，下拉框的内容没有加载进来，三个框都没有内容
    哥们你有加jquery的包吗 这个是可以运行的，我给你写个吧 一会不好意思，忘记改路径了，学生狗自己琢磨伤不起不过，您这个button事件为什么在第一次点击的时候需要点击两次，就是页面重新刷新后选择值点击两次才有显示，之后选择值的时候又只用点击一次就行？然后我从Action返回的JSON是键值对，这样按您的代码改怎么做修改呢？
      

  9.   

    <!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>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
            </script>   <script type="text/javascript">
       var str=[{"reports":[{"companies":[{"companyName":"company1"},{"companyName":"company2"}],"rptName":"rpt1"},{"companies":[{"companyName":"company1"},{"companyName":"company2"}],"rptName":"rpt2"}],"typeName":"type1"},
       {"reports":[{"companies":[{"companyName":"company1"},{"companyName":"company2"}],"rptName":"rpt1"},{"companies":[{"companyName":"company1"},{"companyName":"company2"}],"rptName":"rpt2"}],"typeName":"type2"}];
    $(function(){$(str).each(function(key,val){
      $("<option value="+val.typeName+">" + val.typeName + "</option>").appendTo($("#selF"));});
    //以上是加载第一个文本框$("#selF").change(function(){//第一个文本框的改变事件
    var s=this.value;//第一个文本框的当前值

    $(str).each(function(key,val){//找到第一个文本框的下级成员
      if(val.typeName==s){
      $("#selT").html("<option>请选择</option>");  
      $(val.reports).each(function(k,v){//添加第二个文本框成员

       $("<option value="+v.rptName+">" + v.rptName + "</option>").appendTo($("#selT"));
      
      }); $("#selT").change(function(){//第二个文本框的改变事件
    var s1=this.value; $(val.reports).each(function(ke,va){//找到第二个文本框当前值得下级成员

       if(va.rptName==s1){
       $("#selC").html("<option>请选择</option>");  //第三个文本框成员
         $(va.companies).each(function(kq,vq){

       $("<option value="+vq.companyName+">" + vq.companyName + "</option>").appendTo($("#selC"));
      
      });
       }
      
      }); });
      
      }});
    });})
    </script>
    </head>
    <body> typeName：<select id="selF"><option>请选择</option></select>  
           rptName：<select id="selT"><option>请选择</option></select>  
           companyName：<select id="selC"><option>请选择</option></select>
    </body>
    </html>
      

  10.   

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script>
    var jsonarray = {"data":[{"type":"1","report":"a","company":"com1"},
                  {"type":"1","report":"b","company":"com2"},
                  {"type":"2","report":"b","company":"com2"},
                  {"type":"2","report":"b","company":"com3"},
                  {"type":"2","report":"c","company":"com3"}]};
    $().ready(function(){

    var temptype;
    var typehtml;
    for(var i=0;i<jsonarray.data.length;i++){
    if(i==0){
    typehtml = "<option id= 'type" +i+"'>"+jsonarray.data[i].type+"</option>";
    $("#b").html("<option id= 'report" +i+"'>"+jsonarray.data[i].report+"</option>");
    $("#c").html("<option id= 'company" +i+"'>"+jsonarray.data[i].company+"</option>");
    }
    if(i!= 0 && temptype != jsonarray.data[i].type){
    typehtml = typehtml+ "<option id= 'type" +i+"'>"+jsonarray.data[i].type+"</option>";
    }
    temptype = jsonarray.data[i].type;
    }
    $("#a").html(typehtml); $("#a").change(function(){
    var tempreport;
    var reporthtml="";
    var htmlcompany="";
    var aval = $(this).val();
    for(var i=0;i<jsonarray.data.length;i++){
    if(aval == jsonarray.data[i].type){
    if(tempreport != jsonarray.data[i].report){
    reporthtml = reporthtml+ "<option id= 'report" +i+"'>"+jsonarray.data[i].report+"</option>";
    htmlcompany = htmlcompany + "<option id= 'company" +i+"'>"+jsonarray.data[i].company+"</option>";
    }
    tempreport = jsonarray.data[i].report;
    }
    }
    $("#b").html(reporthtml);
    $("#c").html(htmlcompany);
    }) $("#b").change(function(){
    var tempcompany;
    var companyhtml="";
    var bval = $(this).val();
    var aval = $("#a").val();
    for(var i=0;i<jsonarray.data.length;i++){
    if(bval == jsonarray.data[i].report && aval == jsonarray.data[i].type){
    if(tempcompany != jsonarray.data[i].company){
    companyhtml = companyhtml+ "<option id= 'company" +i+"'>"+jsonarray.data[i].company+"</option>";
    }
    tempcompany = jsonarray.data[i].company;
    }
    }
    $("#c").html(companyhtml);
    })
    });
    </script>
    </head>
    <body>
    <select id = "a" style="width: 100px">
    </select>
    <select id = "b" style="width: 100px">
    </select>
    <select id = "c" style="width: 100px">
    </select>
    </body>
    </html>
      

  11.   

    这个就用最基本的ajax异步就可以实现的，三级级联初始先加载第一级，然后根据选择的值去加载第二级，第三级同样，这样也比较简单