Json

来源：互联网发布：网络交易平台排行榜编辑：程序博客网时间：2024/06/11 01:45

JSON （JavaScript Object Notation）一种简单的数据格式.易于人阅读和编写。同时也易于机器解析和生成

{} 为对象
[] 为数组
"属性名": "值"
一个简单的例子

在一个简单的例子

var menu={
"dongwu":[
{"zhu":"好猪","niu":"好牛"},
{"zhu":"黑猪","niu":"老牛"}
]
}
alert(menu.dongwu[0].zhu)
</script>

最后一个

写一个2级联动 Json当数据源

<body>
<div id="ss"></div>
</body>
<script>
    var menu = [
      {"menu1":"人族","menu2":[
                                {"menu1":"大法师"},
                                {"menu1":"山丘之王"},
                                {"menu1":"圣骑士"},
                                {"menu1":"血法师"}
                                ]},
      {"menu1":"兽族","menu2":[
                                {"menu1":"贱圣"},
                                {"menu1":"先知男"},
                                {"menu1":"牛头人酋长"},
                                {"menu1":"小YY"}
                                ]},
      {"menu1":"不死族","menu2":[
                                {"menu1":"死亡骑士"},
                                {"menu1":"巫妖"},
                                {"menu1":"恐惧魔王"},
                                {"menu1":"小强王子"}
                                ]},
      {"menu1":"精灵族","menu2":[
                                {"menu1":"恶魔猎手"},
                                {"menu1":"丛林守护者"},
                                {"menu1":"守望者"},
                                {"menu1":"老虎女祭祀"}
                                ]}
   ]

for(var i=0;i<2;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))}

function change(num){
document.getElementById("ss").getElementsByTagName("select")[1].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))}
}
</script>

3级联动

<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>