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 相关文章推荐
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
vue模板语法-插值详解
Mar 06 Javascript
Angular弹出模态框的两种方式
Oct 19 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
精美漂亮的php分页类代码
2013/04/02 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
python实现批量图片格式转换
2020/06/16 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
初三政治教学反思
2014/01/30 职场文书
《学会待客》教学反思
2014/02/22 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
80后婚前协议书范本
2014/10/24 职场文书
三人合伙协议书范本
2014/10/29 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android