省市联动的使用方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ly_linyuan/article/details/79978649

首先下载省市联动city.js
下载地址:https://download.csdn.net/download/ly_linyuan/10355527

1.在我们的页面引入city.js并初始化
这里写图片描述

2.成功,效果如下:
这里写图片描述

3.项目中如果个人已经填写过了地址信息,我们需要在用户访问的时候回显之前填写过的地址信息,这里使用$(#).trigger();(根据当前操作的下拉框是省或是市来初始化之后的下拉列表框),在页面中加入如下代码即可:
这里写图片描述

4.完整页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市联动</title>
<!-- 引入省市联动的js -->
<script src="${path}/js/city.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(function(){
    //省市联动回显
    //$(#).trigger();根据当前操作的下拉框是省或是市来初始化之后的下拉列表框
    var province = $("#province").val();
    var city = $("#city").val();
    var town = $("#town").val();
    $('#s_province').val(province);
    $('#s_province').trigger("change");
    $('#s_city').val(city);
    $('#s_city').trigger("change");
    $('#s_county').val(town);
    $('#s_county').trigger("change");
})

</script>
<body>
<div>
 <label>地址:</label>
 <select id="s_province"  name="province" style="height: 35px; width: 100px"></select>
 <select id="s_city"  name="city" style="height: 35px; width: 100px"></select>
 <select id="s_county"  name="town" style="height: 35px; width: 100px"></select>
</div>
//从后台传输过来的值
<input type="hidden" name="city" id="city" value="${user.city }"/>
<input type="hidden" name="town" id="town" value="${user.town }"/>
<input type="hidden" name="province" id="province" value="${user.province }"/>
<script type="text/javascript">
/* 省市联动 */
_init_area();
</script>
</body>
</html>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页