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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
Javascript的表单验证长度
Mar 16 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
vue组件实现进度条效果
Jun 06 Javascript
angular 服务随记小结
May 06 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
竞选班干部演讲稿
2014/04/24 职场文书
梅花魂教学反思
2014/04/25 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
个人维稳承诺书
2015/05/04 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
Pytorch可视化的几种实现方法
2021/06/10 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
mysql查看表结构的三种方法总结
2022/07/07 MySQL