省市联动的使用方法

标签: java
10人阅读 评论(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>
查看评论

js实现的省市联动

最近工作,要用到省市联动的功能。网上搜了一下,发现有很多这样的例子,看了不少实例,把觉得写得不错的代码穿上来,好给大家分享一下。        JS省份三级联动 省份 ...
  • whq19890827
  • whq19890827
  • 2015-07-05 09:51:35
  • 5746

使用javascript实现省市联动小demo

使用javascript实现省市联动小demo心得本人以前是学习Android的,也做了一段时间的Android开发。但是Android在长沙的的需求少,同时自身也没有达到这座城市动则三年经验的要求,...
  • u011248919
  • u011248919
  • 2016-10-10 17:27:05
  • 739

省市联动 纯 HTML + JS

在 JS 里面声明所有数据,并根据 HTML 的 SELECT 事件触发 JS 实现填充对应的数据到下拉框。...
  • Jerome_s
  • Jerome_s
  • 2015-09-12 22:30:55
  • 1277

2016年全国最新省市县镇四级联动数据

  • 2016年05月29日 20:31
  • 4.54MB
  • 下载

中国省市联动菜单ASP

  • 2010年10月14日 08:36
  • 84KB
  • 下载

js2级省市联动下拉框

  • 2009年09月24日 17:31
  • 2KB
  • 下载

有关于用java实现ajax的省市联动

ajax这种东西自己不想说了  百度一下有很多  写这个也是感觉做这个复习了很多知识  有必要记录一下(本人只是实习生一枚) 首先要写一个jsp(其实也是找了很多资料才完成的)     pag...
  • lvliu212
  • lvliu212
  • 2015-12-09 09:13:46
  • 1197

关于省市区的下拉列表联动实现(JS+AJAX)

效果图如下,DB中存取的数据来抽取~      前台JSP页面的实现 企业地址: selected>${province.value} select...
  • huoshendawo_mo
  • huoshendawo_mo
  • 2015-11-16 17:29:23
  • 2493

使用dropdownlist的绑定_实现省市列表级联

前台:                                   onselectedindexchanged="DropDownListProvince_Selecte...
  • liu_111111
  • liu_111111
  • 2012-11-30 14:53:16
  • 4193
    个人资料
    等级:
    访问量: 238
    积分: 221
    排名: 33万+
    文章分类
    文章存档
    最新评论