使用腾讯IP分享计划网站中的纯JS省市区三级联动

最新推荐文章于 2022-06-06 16:29:01 发布

大吉大利_LiKe

最新推荐文章于 2022-06-06 16:29:01 发布

阅读量1.1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/letnet1981/article/details/50560957

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS地址：http://ip.qq.com/js/geo.js

实例如下：

<!DOCTYPE html>
<html>
<head>
<title>省市区三级联动</title>
<script src="http://ip.qq.com/js/geo.js" type="text/javascript" charset="gb2312"></script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js" type="text/javascript"></script>
</head>
<body>
        <form>
            <select class="select" name="province" id="s1">
              <option></option>
            </select>
            <select class="select" name="city" id="s2">
              <option></option>
            </select>
            <select class="select" name="town" id="s3">
              <option></option>
            </select>
            <input id="address" name="address" type="hidden" value="" />
            <input type="submit" value="提交" />
        </form>
<script>

    $(function () {
        //初始化地址选择
        setup();
        if ($("#address").val() == "") {
            preselect('四川省');
            promptinfo();
        }
        else {
            //初始化已有地址
            var valArr = $("#address").val().split(",");
            $("#s1").val(valArr[0]);
            change(1);
            $("#s2").val(valArr[1]);
            change(2);
            $("#s3").val(valArr[2]);
        }
    });
    //这个函数是必须的，因为在geo.js里每次更改地址时会调用此函数
    function promptinfo(){
    }

</script>
</body>
</html>