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&…

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

全世界只有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;从根本上是无法实现界面与逻辑…

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

全世界只有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;即减去这一行的均值求出协方差矩阵求出协方差矩阵的特征值及对应的特征向量将特征向量按对应特征值大…

教程丨亿万网友一起换头像欢庆新中国成立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类型来构建不可变类型和线程安全…

巧用TensorFlow实现图像处理

经过几年的发展&#xff0c;深度学习方法摧枯拉朽般地超越了传统方法&#xff0c;成为人工智能领域最热门的技术。谷歌、亚马逊、百度、Facebook 纷纷开源了自己的深度学习框架。而支撑AlphaGo的核心技术架构&#xff0c;TensorFlow&#xff0c;以其一鸣惊人的绝对表现&#xf…

微软面向初学者的机器学习课程:1.4-机器学习技术

写在前面&#xff1a;最近在参与microsoft/ML-For-Beginners的翻译活动&#xff0c;欢迎有兴趣的朋友加入&#xff08;https://github.com/microsoft/ML-For-Beginners/issues/71&#xff09;机器学习技术构建、使用和维护机器学习模型及其使用的数据的过程与许多其他开发工作流…

四川大学计算机科学与技术专业分数线,2015年四川大学计算机科学与技术硕士考研复试分数线是290分...

2015年四川大学计算机科学与技术硕士考研复试分数线是290分 (4页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;19.90 积分2015 年四川大学计算机科学与技术硕士考研复试分数线是 290 分2015 年四川大…

一个男人逐渐变心的过程。。 | 今日最佳

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

2013-10-10

为什么80%的码农都做不了架构师&#xff1f;>>> http://wordpress.org/plugins/find-duplicates/ 检测文章的标题是否重复的插件 转载于:https://my.oschina.net/520yzw/blog/167580

arm cpu 超频_树莓派 400 超频方法介绍

对树莓派 400 进行超频非常容易实现。散热上&#xff0c;树莓派 400 设计了一个面积很大的被动散热器&#xff0c;这很有用。无需额外的主动降温就可以应对超频的散热需求。尽管有些用户通过配置&#xff0c;让树莓派 400 超频到了 2.2GHz&#xff0c;但我相信 2GHz 更稳一些。…