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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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 身份验证方面的函数
2009/10/11 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php链式操作的实现方式分析
2019/08/12 PHP
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
《狼和小羊》教学反思
2014/04/20 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
卖房协议书样本
2014/10/30 职场文书
顶岗实习协议书
2015/01/29 职场文书
狂人日记读书笔记
2015/06/30 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python