省市区三级联动

效果图如下:

实现方式:

主要使用了juery的数据结构

参考程序如下:

<html>

    <head>
        <script type="text/javascript">
          var a={"sheng":[{"name":"请选择省","shi":[{"name":"请选择市","qu":["请选择区"]}]},
	                    {"name":"江苏","shi":[{"name":"南京","qu":["南京1"]}]},
                            {"name":"浙江","shi":[{"name":"宁波","qu":["宁波1","宁波2"]},
                                                {"name":"杭州","qu":["杭州1","杭州2"]}]},
                            {"name":"甘肃","shi":[{"name":"兰州","qu":["兰州1", "兰州2", "兰州3"]},
                                                {"name":"天水","qu":["天水1", "天水2", "天水3"]},
                                                {"name":"酒泉","qu":["酒泉1", "酒泉2", "酒泉3"]}]}]};

        function shi(){
            var shengs=document.getElementById("sheng");                                 
            var shis=document.getElementById("shi");
            var shengindex=shengs.selectedIndex;
            shis.options.length=0;
            for(i=0;i<a.sheng[shengindex].shi.length;i++){
                var text=a.sheng[shengindex].shi[i].name;
                var value=a.sheng[shengindex].shi[i].name;
                shis.options[shis.options.length]=new Option(text,value);
            }
            qu();
        }
        function qu(){
            var shengs=document.getElementById("sheng");
            var shis=document.getElementById("shi");
            var qus=document.getElementById("qu");
            var shengindex=shengs.selectedIndex;
            var shiindex=shis.selectedIndex;
            qus.options.length=0;
            for(i=0;i<a.sheng[shengindex].shi[shiindex].qu.length;i++){
	        var text=a.sheng[shengindex].shi[shiindex].qu[i];
	        var value=a.sheng[shengindex].shi[shiindex].qu[i];
	        qus.options[qus.options.length]=new Option(text,value);
            }
        }
        </script>
    </head>

    <body>
    <select id="sheng" onclick="shi()">
            <script type="text/javascript">
            for(i=0;i<a.sheng.length;i++){
                document.write("<option value='"+a.sheng[i].name+"'>"+a.sheng[i].name+"</option>");
            }
        </script>
        </select>
        <select id="shi" onclick="qu()">
            <option>请选择市</option>
        </select>
        <select id="qu">
            <option>请选择区</option>
        </select>
    </body>

</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值