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 arguments对象应用介绍
Nov 28 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
Three.js实现简单3D房间布局
Dec 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 高效率写法 推荐
2010/02/21 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
Python 爬虫多线程详解及实例代码
2016/10/08 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
大学生创业策划书
2014/02/02 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
继承公证书
2014/04/09 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
公司奖励通知
2015/04/21 职场文书
廉政承诺书范文
2015/04/28 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
python实现简单区块链结构
2021/04/25 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers