jQuery手机端省市区三级城市联动选择代码(插件三)

demo1:

js、css、img下载

代码:

<link rel="stylesheet" href="/static/city/demo1/style.css">
<div class="iphone">
    <div class="browser">
        <!--选择地区-->
        <section class="express-area">
            <a id="expressArea" href="javascript:void(0)">
                <dl>
                    <dt>选择地区:</dt>
                    <dd>省 &gt; 市 &gt; 区/县</dd>
                    <!--这里可用来处理默认选中效果,就是编辑时候使用-->
                    <!--<dd>天津市 &gt; 蓟县</dd>-->
                </dl>
            </a>
        </section>
        <!--选择地区弹层-->
        <section id="areaLayer" class="express-area-box" style="bottom: 0px;bottom: -100%">
            <header>
                <h3>选择地区</h3>
                <a id="backUp" class="back" href="javascript:void(0)" title="返回" style="display: none;"></a>
                <a id="closeArea" class="close" href="javascript:void(0)" title="关闭"></a>
            </header>
            <article id="areaBox">
                <ul id="areaList" class="area-list"><li onclick="selectP(0);">北京市</li><li onclick="selectP(1);">天津市</li><li onclick="selectP(2);">河北省</li><li onclick="selectP(3);">河南省</li><li onclick="selectP(4);">山西省</li><li onclick="selectP(5);">山东省</li><li onclick="selectP(6);">内蒙古自治区</li><li onclick="selectP(7);">辽宁省</li><li onclick="selectP(8);">吉林省</li><li onclick="selectP(9);">黑龙江省</li><li onclick="selectP(10);">上海市</li><li onclick="selectP(11);">江苏省</li><li onclick="selectP(12);">浙江省</li><li onclick="selectP(13);">福建省</li><li onclick="selectP(14);">江西省</li><li onclick="selectP(15);">安徽省</li><li onclick="selectP(16);">湖北省</li><li onclick="selectP(17);">湖南省</li><li onclick="selectP(18);">广东省</li><li onclick="selectP(19);">广西壮族自治区</li><li onclick="selectP(20);">海南省</li><li onclick="selectP(21);">重庆市</li><li onclick="selectP(22);">四川省</li><li onclick="selectP(23);">贵州省</li><li onclick="selectP(24);">云南省</li><li onclick="selectP(25);">西藏自治区</li><li onclick="selectP(26);">陕西省</li><li onclick="selectP(27);">甘肃省</li><li onclick="selectP(28);">青海省</li><li onclick="selectP(29);">宁夏回族自治区</li><li onclick="selectP(30);">新疆维吾尔自治区</li><li onclick="selectP(31);">台湾省</li><li onclick="selectP(32);">香港特别行政区</li><li onclick="selectP(33);">澳门特别行政区</li></ul>
            </article>
        </section>
        <!--遮罩层-->
        <div id="areaMask" class="mask" style="display: none;"></div>
        <script type="text/javascript" src="/static/node_modules/jquery/dist/jquery.min.js"></script>

        <script src="/static/city/demo1/jquery.area.js"></script>
    </div>
</div>

demo2:

js、css下载

代码:

<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" type="text/css" />
<div class="container">
    <div class="row main">
        <div class="col-md-12">
            <div class="row" style="margin-top: 30px; text-align: center;">
                <a href="#" class="btn btn-info btn-lg active" role="button" id="sel_city">点击选取省市区县</a>
            </div>
        </div>
    </div>
</div>
<script src="/static/city/demo2/js/picker.min.js"></script>
<script src="/static/city/demo2/js/city.js"></script>
<script src="/static/city/demo2/js/main.js"></script>

demo1&&demo2效果图:

1512403875298529.png

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

武斌博客 http://www.wubin.pro

Top