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 实用的文字链提示框效果
Jun 30 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 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/06/18 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
党员教师四风问题对照检查材料
2014/09/26 职场文书
小学班长竞选稿
2015/11/20 职场文书
领导干部学习心得体会
2016/01/23 职场文书
高一英语教学反思
2016/03/03 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
如何使用python包中的sched事件调度器
2022/04/30 Python