Angular.js输入框弹出城市联动地址选择代码

来源:https://www.sucaihuo.com/js/2817.html 2017-08-23 22:39浏览(1224) 收藏

一款Angular.js输入框弹出城市联动地址选择代码,点击不同的省市都有次级的联动效果,本示例为三级联动效果,选择完成后还可以再补充输入详细的街道信息等。
Angular.js输入框弹出城市联动地址选择代码
分类:表单代码 > 城市选择 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入bootstrap样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="js/plugins/bootstrap/dist/css/bootstrap.min.css" />

页面的body部分,div容器里面放了一个form表单,代码如下:

<div class="row">
    <div class="col-sm-6 col-sm-offset-3">
        <div class="page-header">
            <h1 class="text-center">Angular.js输入框弹出城市联动地址选择代码</h1>
        </div>
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-4 control-label">需在服务器运行<span class="text-muted">(暂仅支持单例)</span></label>
                <div class="col-sm-6">
                    <input select-address p="p" c="c" a="a" d="d" ng-model="xxx" placeholder="请选择所在地" type="text" class="form-control" />
                </div>
            </div>
        </form>
    </div>
</div>

页面的底部,需引入jQuery库和其余3个JS文件,代码如下:

<script type="text/javascript" src="js/plugins/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/angular/angular.min.js"></script>
<script type="text/javascript" src="js/selectAddress2.js"></script>
<script type="text/javascript" src="js/index.js"></script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2