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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
vue开发简单上传图片功能
Jun 30 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页面运行时间的函数介绍
2013/07/01 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
Django实现快速分页的方法实例
2017/10/22 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python中@property的理解和使用示例
2019/06/11 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
python动态文本进度条的实例代码
2020/01/22 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
好家长事迹材料
2014/01/23 职场文书
清明节演讲稿
2014/05/27 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
安全责任书
2015/01/29 职场文书
入党团支部推荐意见
2015/06/02 职场文书
创业计划书之面包店
2019/09/12 职场文书
python常见的占位符总结及用法
2021/07/02 Python
详解Python中下划线的5种含义
2021/07/15 Python