省市区县多级下拉联动选框[来自于网络]

最新推荐文章于 2022-11-23 16:43:52 发布

张伟灿

最新推荐文章于 2022-11-23 16:43:52 发布

阅读量1.3k

点赞数

文章标签：网络 xmlhttprequest function javascript c json

<!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" />
        <script language="JavaScript" type="text/javascript" src="jquery-1.4.min.js">
        </script>
        <script language="javascript" type="text/javascript">
            function init(){
                var $p = $('#province');
                var $d = $('#district');
                var $c = $('#city');
                $.ajax({
                    type: "GET",
                    url: "province.json",
                    dataType: "json",
                    success: function(d){
                        var s = '<option>=请选择省或直辖市=</option>';
                        $.each(d, function(i){
                            s += '<option value="' + d[i].c + '">' + d[i].n + '</option>';
                        });
                        $p.append(s);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        alert(textStatus + " " + errorThrown);
                    }
                });

                $p.change(function(){
                    var v = $p.val();
                    $.ajax({
                        type: "GET",
                        url: "city.json",
                        dataType: "json",
                        success: function(d){
                            var s = '<option>=请选择市=</option>';
                            $.each(d, function(i){
                                s += ((v.substring(0, 2) == d[i].c.substring(0, 2)) ? ('<option value="' + d[i].c + '">' + d[i].n + '</option>') : '');
                            });
                            $c.html(s);
                        },
                     error: function(XMLHttpRequest, textStatus, errorThrown){
                         alert(textStatus);
                     }
                });
    });

                $c.change(function(){
                    var v = $c.val();
                    $.ajax({
                        type: "GET",
                        url: "district.json",
                        dataType: "json",
                        success: function(d){
                            var s = '<option>=请选择县或区=</option>';
                            $.each(d, function(i){
                                s += ((v.substring(0, 4) == d[i].c.substring(0, 4)) ? ('<option value="' + d[i].c + '">' + d[i].n + '</option>') : '');
                            });
                            $d.html(s);
                        },
                     error: function(XMLHttpRequest, textStatus, errorThrown){
                         alert(textStatus);
                     }
                   });
    });

    $('#showSelect').click(function(){
                    $('#showValue').html($p.val() + '-' + $c.val() + '-' + $d.val());
                });
            }
            jQuery(function(){
    init();
   });

        </script>
        <title>省市区县多级下拉联动选框</title>
        <style type="text/css">
        
        </style>
    </head>
    <body>
        <select name="province" id="province">
        </select>
        <select name="city" id="city">
        </select>
        <select name="district" id="district">
        </select>
        <a href="#" id="showSelect">查看获取数值</a>
        <BR>
        <span id="showValue"></span>
        <div style="display:none">
            <script language="javascript" type="text/javascript" src="/js/trace.js">
            </script>
        </div>
    </body>
</html>

其中city.json，province.json，district.json 数据格式均为

[{"n":"安徽省","c":"340000"},{"n":"北京市","c":"110000"},{"n":"福建省","c":"350000"},{"n":"甘肃省","c":"620000"},{"n":"广东省","c":"440000"},{"n":"广西壮族自治区","c":"450000"},{"n":"贵州省","c":"520000"},{"n":"海南省","c":"460000"},{"n":"河北省","c":"130000"},{"n":"河南省","c":"410000"},{"n":"黑龙江省","c":"230000"},{"n":"湖北省","c":"420000"},{"n":"湖南省","c":"430000"},{"n":"吉林省","c":"220000"},{"n":"江苏省","c":"320000"},{"n":"江西省","c":"360000"},{"n":"辽宁省","c":"210000"},{"n":"内蒙古自治区","c":"150000"},{"n":"宁夏回族自治区","c":"640000"},{"n":"青海省","c":"630000"},{"n":"山东省","c":"370000"},{"n":"山西省","c":"140000"},{"n":"陕西省","c":"610000"},{"n":"上海市","c":"310000"},{"n":"四川省","c":"510000"},{"n":"天津市","c":"120000"},{"n":"西藏自治区","c":"540000"},{"n":"新疆维吾尔自治区","c":"650000"},{"n":"云南省","c":"530000"},{"n":"浙江省","c":"330000"},{"n":"重庆市","c":"500000"}]

具体的三个文件，可以到我的资源空间里，下载

http://yuanfen860913.download.youkuaiyun.com/