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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue webpack实用技巧总结
2018/04/24 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
angular6 填坑之sdk的方法
2018/12/27 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Python Socket编程之多线程聊天室
2018/07/28 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python通过cython加密代码
2020/12/11 Python
大学生预备党员自我评价分享
2013/11/16 职场文书
关于人生的感言
2014/01/17 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
人事部岗位职责范本
2014/03/05 职场文书
餐馆开业致辞
2015/08/01 职场文书
特种设备安全管理制度
2015/08/06 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers