省市县 json 数据怎么解析 成下拉框并且联动的

 我来答
j88r
2016-06-17 · 知道合伙人软件行家
j88r
知道合伙人软件行家
采纳数:33317 获赞数:46472
从事多年系统运维,喜欢编写各种小程序和脚本。

向TA提问 私信TA
展开全部
<html>
<head>
<script language="javascript" src="json.txt"></script>
<script type="text/javascript">
    //var html=[{c:[{c:[{name:"县",value:"000000"}],name:"市",value:"0000"}],name:"省",value:"00"},{c:[{c:[{name:"北京",value:"010100"},{name:"海淀",value:"010200"},{name:"朝阳",value:"010300"},{name:"顺义",value:"010400"},{name:"怀柔",value:"010500"},{name:"通州",value:"010600"},{name:"昌平",value:"010700"},{name:"延庆",value:"010800"},{name:"丰台",value:"010900"},{name:"石景山",value:"011000"},{name:"大兴",value:"011100"},{name:"房山",value:"011200"},{name:"密云",value:"011300"},{name:"门头沟",value:"011400"},{name:"平谷",value:"011500"},{name:"八达岭",value:"011600"},{name:"佛爷顶",value:"011700"},{name:"汤河口",value:"011800"},{name:"密云上甸子",value:"011900"},{name:"斋堂",value:"012000"},{name:"霞云岭",value:"012100"}],name:"北京",value:"0101"}],name:"北京",value:"01"},{c:[{c:[{name:"上海",value:"020100"},{name:"闵行",value:"020200"},{name:"宝山",value:"020300"},{name:"川沙",value:"020400"},{name:"嘉定",value:"020500"},{name:"南汇",value:"020600"},{name:"金山",value:"020700"},{name:"青浦",value:"020800"},{name:"松江",value:"020900"},{name:"奉贤",value:"021000"},{name:"崇明",value:"021100"},{name:"陈家镇",value:"021200"},{name:"引水船",value:"021300"}],name:"上海",value:"0201"}],name:"上海",value:"02"}];
    function init(){
        document.write('省:<select onchange="getListOne();" id="province">');
        document.write('<option value="">----请选择----</option>');
        for(var i=0;i<html.length;i++){
            document.write('<option value='+html[i].value+'>'+html[i].name+'</option>');
        }
        document.write('</select>');
        document.write('市:<select onchange="getListTwo();" id="town">');
        document.write('<option value="">----请选择----</option></select>');
        document.write('县:<select id="county">');
        document.write('<option value="">----请选择----</option></select>');
    }
    function getListOne(){
        var value=document.getElementById('province').value;
        if(document.getElementById('town')!=null){
            document.getElementById('town').length=1;//清空select,保留第一条
        }
        if(value!=""){
            for(var i=0;i<html.length;i++){
                if(html[i].value==value){
                    for(var j=0;j<html[i].c.length;j++){
                        var option=document.createElement('option');
                        option.value=html[i].c[j].value;
                        option.text=html[i].c[j].name;
                        document.getElementById('town').options.add(option);
                        //document.write('<option value='+html[i].c[j].value+'>'+html[i].c[j].name+'</option>');
                    }
                }
            }
        }
    }
    function getListTwo(){
        var value=document.getElementById('town').value;
        if(document.getElementById('county')!=null){
            document.getElementById('county').length=1;//清空select,保留第一条
        }
        if(value!=""){
            for(var i=0;i<html.length;i++){
                for(var j=0;j<html[i].c.length;j++){
                    if(html[i].c[j].value==value){
                        for(var k=0;k<html[i].c[j].c.length;k++){
                            var option=document.createElement('option');
                            option.value=html[i].c[j].c[k].value;
                            option.text=html[i].c[j].c[k].name;
                            document.getElementById('county').options.add(option);
                        }
                    }
                }
            }
        }
    }
</script>
</head>
<body onload="init();">
</body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式