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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
Python 多核并行计算的示例代码
2017/11/07 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
普通党员整改措施
2014/10/24 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
士兵突击观后感
2015/06/16 职场文书
2019年工作总结范文
2019/05/21 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
python自动化八大定位元素讲解
2021/07/09 Python