当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript China城市联动

JavaScript China城市联动

2020年07月24日  | 移动技术网IT编程  | 我要评论 
                              中国全城市的地址省,市,县

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>

    <script src="jquery.js"></script>
    <script src="json.js"></script>
    <script src="citySet.js"></script>
    <style type="text/css">
        * {
            -ms-word-wrap: break-word;
            word-wrap: break-word;
        }
        
        html {
            -webkit-text-size-adjust: none;
            text-size-adjust: none;
        }
        
        html,
        body {
            height: 100%;
            width: 100%;
        }
        
        html,
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        div,
        ul,
        ol,
        li,
        dl,
        dt,
        dd,
        iframe,
        textarea,
        input,
        button,
        p,
        strong,
        b,
        i,
        a,
        span,
        del,
        pre,
        table,
        tr,
        th,
        td,
        form,
        fieldset,
        .pr,
        .pc {
            margin: 0;
            padding: 0;
            word-wrap: break-word;
            font-family: verdana, Microsoft YaHei, Tahoma, sans-serif;
            *font-family: Microsoft YaHei, verdana, Tahoma, sans-serif;
        }
        
        body,
        ul,
        ol,
        li,
        dl,
        dd,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        fieldset,
        .pr,
        .pc,
        em,
        del {
            font-style: normal;
            font-size: 100%;
        }
        
        ul,
        ol,
        dl {
            list-style: none;
        }
        
        ._citys {
            width: 450px;
            display: inline-block;
            border: 2px solid #eee;
            padding: 5px;
            position: relative;
        }
        
        ._citys span {
            color: #56b4f8;
            height: 15px;
            width: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 3px;
            position: absolute;
            right: 10px;
            top: 10px;
            border: 1px solid #56b4f8;
            cursor: pointer;
        }
        
        ._citys0 {
            width: 100%;
            height: 34px;
            display: inline-block;
            border-bottom: 2px solid #56b4f8;
            padding: 0;
            margin: 0;
        }
        
        ._citys0 li {
            display: inline-block;
            line-height: 34px;
            font-size: 15px;
            color: #888;
            width: 80px;
            text-align: center;
            cursor: pointer;
        }
        
        .citySel {
            background-color: #56b4f8;
            color: #fff !important;
        }
        
        ._citys1 {
            width: 100%;
            display: inline-block;
            padding: 10px 0;
        }
        
        ._citys1 a {
            width: 83px;
            height: 35px;
            display: inline-block;
            background-color: #f5f5f5;
            color: #666;
            margin-left: 6px;
            margin-top: 3px;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
            font-size: 13px;
            overflow: hidden;
        }
        
        ._citys1 a:hover {
            color: #fff;
            background-color: #56b4f8;
        }
        
        .AreaS {
            background-color: #56b4f8 !important;
            color: #fff !important;
        }
        
        body {
            background: yellowgreen;
        }
        
        input {
            width: 300px;
            height: 50px;
        }
    </style>
</head>

<body>

    <div style="width:400px; margin:100px auto;">
        <input type="text" id="city" placeholder="请选择鸭~">
    </div>

    <script type="text/javascript">
        $("#city").click(function(e) {
            SelCity(this, e);
        });
    </script>




</body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文地址：https://blog.csdn.net/weixin_46474458/article/details/107532663

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网