省市联动的使用方法

最新推荐文章于 2024-05-22 18:55:52 发布

昨天的邂逅

最新推荐文章于 2024-05-22 18:55:52 发布

阅读量1.4k

点赞数 2

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/ly_linyuan/article/details/79978649

版权

java 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

首先下载省市联动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>

昨天的邂逅

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
省市联动的使用方法

首先下载省市联动city.js 下载地址：https://download.csdn.net/download/ly_linyuan/103555271.在我们的页面引入city.js并初始化 2.成功，效果如下： 3.项目中如果个人已经填写过了地址信息，我们需要在用户访问的时候回显之前填写过的地址信息，这里使用$(#).trigger();（根据当前操作的下拉框是省或是市来初始...
复制链接

扫一扫