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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
jquery 插件学习(三)
Aug 06 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
精读《Vue3.0 Function API》
May 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
织梦模板标记简介
2007/03/11 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python Opencv将图片转为字符画
2021/02/19 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
后勤人员岗位职责
2013/12/17 职场文书
车间操作工岗位职责
2013/12/19 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
小露珠教学反思
2014/04/30 职场文书
仲裁协议书
2014/09/26 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
市场营销计划书
2015/01/17 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers