html省市区选择器代码,js实现一个省市区三级联动选择框代码分享

运行效果:

0a22c0b072204c69bfdd78a951689c7c.png 

=================================================

部分代码:

=================================================

当然首先你数据库中要有这个table,不然你没有数据.....^_^

所在地:

${xzqh.province}

js代码:

/**

* 加载市

*

*/

function loadCity() {

var provinceId = $("#provinceSelect option:selected").val();

if(provinceId == null || provinceId == ""){

//alert("找不到省");

}else{

$.post(rootPath+"/loadCity", {

"q" : provinceId

}, function(data, result) {

if(data == "noId"){

alert("请求错误");

}else if(data == "null"){

alert("系统找不到属于该省的市");

}else{

data = eval("{" + data + "}");

var citySelect = $("#citySelect");

var myCity = $("#myCity").val();

citySelect.html("");

for ( var i = 0; i < data.length; i++) {

if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){

citySelect.append(""

+ data[i].name + "");

}else{

citySelect.append(""

+ data[i].name + "");

}

}

loadRegion();

}

});

}

};

/**

* 加载区

*

*/

function loadRegion() {

var cityId = $("#citySelect option:selected").val();

if(cityId == null || cityId == "" || cityId < 1){

alert("找不到市");

}else{

$.post(rootPath+"/loadRegion", {

"q" : cityId

}, function(data, result) {

if(data == "noId"){

alert("请求错误");

}else if(data == "null"){

alert("系统找不到属于该市的区");

}else{

data = eval("{" + data + "}");

var regionSelect = $("#regionSelect");

var myRegion = $("#myRegion").val();

regionSelect.html("");

for ( var i = 0; i < data.length; i++) {

if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){

regionSelect.append(""

+ data[i].name + "");

}else{

regionSelect.append(""

+ data[i].name + "");

}

}

}

});

}

};

/**

* 省改变事件

*

*/

$("#provinceSelect").change(loadCity);

/**

* 市改变事件

*

*/

$("#citySelect").change(loadRegion);

$(function() {

loadCity();

});

后台方法:

/**

* 加载城市数据

*

*/

public void loadCity() {

if (q == null || q.trim().equals("")) {

write("noId");

} else {

List citys = xzqhService.queryCitys(q.trim());

if (citys == null || citys.size() < 1) {

write("null");

} else {

StringBuilder builder = new StringBuilder("[");

for (Xzqh city : citys) {

builder.append("{'id':'");

builder.append(city.getCityId());

builder.append("','name':'");

builder.append(city.getCity());

builder.append("'},");

}

if (builder.length() > 1)

builder.replace(builder.length() - 1, builder.length(), "]");

write(builder.toString());

}

}

}

/**

* 加载区数据

*

*/

public void loadRegion() {

if (q == null || q.trim().equals("")) {

write("noId");

} else {

List citys = xzqhService.queryDistricts(q.trim());

if (citys == null || citys.size() < 1) {

write("null");

} else {

StringBuilder builder = new StringBuilder("[");

for (Xzqh district : citys) {

builder.append("{'id':'");

builder.append(district.getRegionId());

builder.append("','name':'");

builder.append(district.getRegion());

builder.append("'},");

}

if (builder.length() > 1)

builder.replace(builder.length() - 1, builder.length(), "]");

write(builder.toString());

}

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

做人开心最重要

做人开心最重要 转载于:https://www.cnblogs.com/LeeWenjie/archive/2006/11/23/569502.html

你和学霸的差距,不只是成绩

教育不是只有在校园学习不是只有课堂阅读不是只有书上这几个移动的课堂&#xff0c;可以让大家随时关注它们带你学习更多知识【关注方式 】1 - 搜索公众号ID关注2 - 长按二维码识别关注数学好物ID: webaoming简介&#xff1a;“数学好物”是一个致力为数学爱好者与家长&#x…

Storyboard.storyboard could not be opened. Could not read the archive.

Storyboard.storyboard could not be opened. Could not read the archive. Please use a newer version of Xcode. Consider changing the documents Development Target to preserve compatibility. 用低版本xcode打开高版本xcode下创建的项目时会出现这个错误。 解决办法&a…

Binding(二):控件关联和代码提升

上节我们讲到&#xff0c;使用Binding&#xff0c;我们可以关联后台代码中的属性&#xff0c;在某些情况下&#xff0c;我们可能需要将两个控件关联起来&#xff0c;借助Binding&#xff0c;我们也可以轻松的实现。关联控件设想这样一个场景&#xff0c;界面中有个CheckBox&…

python实战excel_实战python 读写EXCEL表

python/EXCEL读取保存import xlwtimport xlrdimport osdef read_excel(filename):row_list []bk xlrd.open_workbook(filename)try:sh bk.sheet_by_name("Sheet1")except:print("no sheet in %s named Sheet1" % filename)else:# 获取行数nrows sh.nro…

网页表格线框html,关于Dreamweaver中怎么让html网页中的table边框细线显示?

关于Dreamweaver中怎么让html网页中的table边框细线显示?对于不是编程的我们&#xff0c;用Dreamweaver制作表格的情况下。默认表格边框会标的比较粗&#xff0c;今天给大家介绍下制作西表格超级简单的方法。是复制一段CSS内嵌样式方法来制作细线表格&#xff0c;然后再通过bo…

众望所归!中国机器狗能【后空翻】了。。。

全世界只有3.14 % 的人关注了青少年数学之旅在北京亦庄举办的世界机器人大会昨天结束了&#xff0c;这次大会上明显的感觉机械狗多了不少&#xff0c;中瑞福宁展示了四足多用途机器人Anymal&#xff0c;深度学习加持爬行、走路、跑步、跳舞样样精通&#xff1a;上楼梯的Anymal算…

男人别让爱你的女孩流泪

曾经以为付出就会有回报&#xff0c;付出才知道&#xff0c;在她的心里我始终不是最重要&#xff0c;无可奈何花落去&#xff0c;似曾相识燕归来。 经年少轻狂的我不知道什么是珍贵&#xff0c;直到有天&#xff0c;我回忆过去&#xff0c;我才知道眼泪的味道是咸的…… 第一次…

Binding(一):数据绑定

这节开始分几期来讲一下WPF中Binding的相关用法&#xff0c;本节主要讲使用Binding进行数据绑定。Binding的作用在WinForm中&#xff0c;我们要想对控件赋值&#xff0c;需要在后台代码中拿到控件对象进行操作&#xff0c;这种赋值形式&#xff0c;从根本上是无法实现界面与逻辑…

浙江省2021年英语高考成绩查询,浙江高考成绩查询、志愿填报时间公布!

为期四天的2021年浙江省高考将于明天下午落幕对于高考生来说志愿填报是除考试外的重要环节今晚&#xff0c;浙江省教育考试院发布2021年浙江省高考志愿填报日程安排根据计划6月26日左右将公布各段分数线和一分一段线提供考试成绩和位次号查询所有考生高考志愿均实行网上填报浙江…

background 旋转_第4章 旋转的圆弧(《Python趣味创意编程》教学视频)

&#xff08;图书介绍&#xff1a;童晶&#xff1a;《Python趣味创意编程》新书预告&#xff09;本章我们将实现旋转的圆弧&#xff0c;如图所示。首先学习圆弧的绘制和旋转&#xff1b;接着利用全局变量实现圆弧逐渐变长&#xff0c;学习if选择语句&#xff0c;实现圆弧长度的…

大师之路-GoLive 视频教程

全部章节 (54Files/1.2G)01 输出网页设计稿 (素材)02 建立站点03 操作方式初识04 用版面网格进行布局05 创建翻转及脚本库设置06 通过关系图策划站点07 使用表格08 表格的控制和嵌套09 应用表样式和表数据处理10 表格制作实战(1/2)11 表格制作实战(2/2)12 色彩应用13 管理站点色…

世纪渣男何书桓! | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅&#xff08;图源网络&#xff0c;侵权删&#xff09;渣男&#xff0c;实锤&#xff01;↓ ↓ ↓

你也可以搞懂的微服务第一篇——来自ThoughtWork的学习体验

????欢迎点赞 &#xff1a;???? 收藏 ⭐留言 ???? 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;????本文作者&#xff1a;由webmote 原创&#xff0c;首发于 【掘金】????作者格言&#xff1a;生活在于折腾&#xff0c;当你不折…

laravel缓存html,Laravel 静态页面缓存 JosephSilber/page-cache - 码农天地

JosephSilber/page-cache Laravel 静态页面缓存2020-02-26 09:39:53Laravel 页面缓存这个包允许您轻松地将响应缓存为磁盘上的静态文件&#xff0c;以便更快速地加载页面。包管理地址&#xff1a;安装&#xff1a;用 composer 安装 page-cache 包&#xff1a;composer require …

pca 累积方差贡献率公式_机器学习数据降维方法:PCA主成分分析

PCA在机器学习中很常用&#xff0c;是一种无参数的数据降维方法。PCA步骤&#xff1a;将原始数据按列组成n行m列矩阵X将X的每一行(代表一个属性字段)进行零均值化&#xff0c;即减去这一行的均值求出协方差矩阵求出协方差矩阵的特征值及对应的特征向量将特征向量按对应特征值大…

克制

克制&#xff0c;克制&#xff0c;学会克制自己的情绪&#xff01;生气容易变老&#xff0c;生气是浪费自己的时间&#xff0c;生气是对自己不负责&#xff0c;生气容易对别人幼小的心灵造成伤害。。。 总之&#xff0c;生气这个坏东西&#xff0c;弃之&#xff01; 转载于:htt…

教程丨亿万网友一起换头像欢庆新中国成立70周年,就差你了!

全世界只有3.14 % 的人关注了青少年数学之旅眼看着2019年国庆节马上要到了大街小巷都挂起来显眼的国旗而今天早上朋友圈更是被“国旗”刷屏一打开朋友圈满屏的国旗微信头像不少网友们都以为只要在朋友圈“微信官方”就能获取定制国旗头像虽说这是一个官方的彩蛋但实际上并不是这…

如何在已安装TMG2010服务器上安装Symantec Backup Exec 2010 Remote Agent

公司一台TMG服务器更换为新服务器&#xff0c;安装部署完TMG2010后&#xff0c;再安装Backup Exec 2010 Remote Agent时无法通过推送方法安装成功&#xff0c;出现如下错误提示&#xff1a; 此时&#xff0c;只好通过手动方法在TMG服务器上安装Be Agent。 登录TMG服务器&#x…

如何在 C# 9 中使用record类型?

原文链接&#xff1a;https://www.infoworld.com/article/3607372/how-to-work-with-record-types-in-csharp-9.html原文标题&#xff1a;How to work with record types in C# 9翻译&#xff1a;沙漠尽头的狼(谷歌翻译加持)利用 C# 9 中的record类型来构建不可变类型和线程安全…