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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 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
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php图片缩放实现方法
2014/02/20 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Python中创建二维数组
2018/10/17 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python实现猜数字游戏
2020/03/25 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
《小熊住山洞》教学反思
2014/02/21 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android