JSON学习一例

来源：互联网发布：惠州有什么好玩的知乎编辑：程序博客网时间：2024/04/27 05:51

选择框成树状关系，返回JSON，生成选择框，并逐级改变。

<html>
<head>
  <title>JSON</title>
</head>
<script type="text/javascript" language="javascript">
  var json =    [
             { "区":"三国",
           "街道":["曹操街道","刘备街道","孙权街道"],
           "曹操街道":["徐晃村","张合村","许褚村"],
           "刘备街道":["张飞村","关羽"],
           "孙权街道":["周瑜村","黄盖村"]
          },
          { "区":"西游",
           "街道":["唐僧街道","玉帝街道"],
           "唐僧街道":["孙悟空","猪八戒","沙僧"],
           "玉帝街道":["太上老君","哪吒三太子"]
          }
          ];
  //alert(json[0]["街道"][0]);
  function initSelect(){
       var qyItem = document.getElementById("selectQY");

       for(var i=0;i<json.length;i++)
          {
            if(json[i]["区"]!="undefined")
            {
                var varItem = new Option(json[i]["区"],json[i]["区"]);
                qyItem.options.add(varItem);
            }
          }
          QYChange();
   }
  function QYChange(){
     var qyItem = document.getElementById("selectQY");
     var jdItem = document.getElementById("selectJD");
     jdItem.options.length = 0;
       for(var i=0;i<json.length;i++)
          {
            if(json[i]["区"]==qyItem.value)
            {
                for(var j=0;j<json[i]["街道"].length;j++)
             {
               if(json[i]["街道"][j]!="undefined")
               {
                  var varItem = new Option(json[i]["街道"][j],json[i]["街道"][j]);
                  jdItem.options.add(varItem);
               }
             }
            }
          }
          JDChange();
   }
  function JDChange(){
     var qyItemValue = document.getElementById("selectQY").value;
     var jdItemValue = document.getElementById("selectJD").value;
     var cunItem = document.getElementById("selectCun");
     cunItem.options.length = 0;
       for(var i=0;i<json.length;i++){
            if(json[i]["区"]==qyItemValue){
            if(jdItemValue!=null && jdItemValue!="undefined"){
                for(var j=0;j<json[i][jdItemValue].length;j++){
               if(json[i][jdItemValue][j]!="undefined"){
                  var varItem = new Option(json[i][jdItemValue][j],json[i][jdItemValue][j]);
                  cunItem.options.add(varItem);
               }
             }
            }
            }
          }
   }
</script>
<body>
<div id="DIV1" align="center">区：
<select name="selectQY" onchange="QYChange()">
</select>
    街道：
<select name="selectJD" onchange="JDChange()">
</select>
    村：
<select name="selectCun">
</select>
      <input name="button1" type="button" value="查询" onclick="initSelect()" />
<br />

</div>
</body>
</html>