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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
JQuery toggle使用分析
Nov 16 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
JavaScript之自定义类型
May 04 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
JS window对象简单操作完整示例
Jan 14 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事务处理实例详解
2014/07/11 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
php fread函数使用方法总结
2019/05/28 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
layui表格数据重载
2019/07/27 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
大一自我鉴定范文
2013/10/04 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
文明倡议书范文
2014/04/15 职场文书
会计求职自荐信
2014/06/20 职场文书
教学督导岗位职责
2015/04/10 职场文书
工作会议简报
2015/07/20 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL