jQuery select表单提交省市区城市三级联动核心代码


Posted in Javascript onJune 09, 2014

jQuery select表单提交省市区城市三级联动,引用的是“jquery-1.7.min”类库,地区码查询地区名用数组存在AreaData_min,下面摘要部分代码:

SelectArea.htm文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery select表单提交省市区城市三级联动</title> 
<script src="jquery-1.7.min.js" type="text/javascript"></script> 
<script src="Area.js" type="text/javascript"></script> 
<script src="AreaData_min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function (){ 
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0'); 
}); //得到地区码 
function getAreaID(){ 
var area = 0; 
if($("#seachdistrict").val() != "0"){ 
area = $("#seachdistrict").val(); 
}else if ($("#seachcity").val() != "0"){ 
area = $("#seachcity").val(); 
}else{ 
area = $("#seachprov").val(); 
} 
return area; 
} 
function showAreaID() { 
//地区码 
var areaID = getAreaID(); 
//地区名 
var areaName = getAreaNamebyID(areaID) ; 
alert("您选择的地区码:" + areaID + " 地区名:" + areaName); 
} 
//根据地区码查询地区名 
function getAreaNamebyID(areaID){ 
var areaName = ""; 
if(areaID.length == 2){ 
areaName = area_array[areaID]; 
}else if(areaID.length == 4){ 
var index1 = areaID.substring(0, 2); 
areaName = area_array[index1] + " " + sub_array[index1][areaID]; 
}else if(areaID.length == 6){ 
var index1 = areaID.substring(0, 2); 
var index2 = areaID.substring(0, 4); 
areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID]; 
} 
return areaName; 
} 
</script> 
</head> 
<body> 
<label>请选择省市地区:</label></br> 
<select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select> 
<select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select> 
<span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span> 
<input type="button" value="获取地区" onClick="showAreaID()"/> 
</body> 
</html>

程序下载地址:

jquery select表单提交省市区城市三级联动

效果图:
jQuery select表单提交省市区城市三级联动核心代码

Javascript 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
JS解密入门 最终变量劫持
Jun 25 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 #Javascript
js判断元素是否隐藏的方法
Jun 09 #Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 #Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 #Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 #Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 #Javascript
初识SmartJS - AOP三剑客
Jun 08 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python 多进程、多线程效率对比
2020/11/19 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
生日派对邀请函
2014/01/13 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
春风行动实施方案
2014/03/28 职场文书
团日活动总结
2014/04/28 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
投资申请报告
2015/05/19 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android