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 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
django中send_mail功能实现详解
2018/02/06 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
值得收藏的10道python 面试题
2019/04/15 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
业务主管岗位职责
2013/11/20 职场文书
银行求职自荐书
2014/06/25 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
历史博物馆观后感
2015/06/05 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers