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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue中锚点的三种方法
Jul 06 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
js实现导航跟随效果
Nov 17 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
Vue组件化开发思考
2018/02/02 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python函数装饰器用法实例详解
2015/06/04 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python树莓派红外反射传感器
2019/01/21 Python
python Shapely使用指南详解
2020/02/18 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
聊聊python中的循环遍历
2020/09/07 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
敬老院活动总结
2014/04/28 职场文书
实习推荐信
2014/05/10 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014年司机工作总结
2014/11/21 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015年幼师工作总结
2015/04/28 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python