js操作二级联动实现代码


Posted in Javascript onJuly 27, 2010

表结构
二级或多级联动主要是以数据库中具有父编号的表为基础,这个也不例外
id,parent_id,name 三列。

采用js操作
先说下数据在js中的存储方式。
主要用二维数组来存储数据。结构如下:
a[父编号]=[[子编号1,子名称1],[子编号2,子名称2],[子编号3,子名称3],……];
首先用父编号获取所有的子数据,在把子数据的编号及名称绑定在dropdown中

第一步 二级联动数据(后面说这些数据怎么得到)

var cities=new Array(); 
cities['00000000-0000-0000-0000-000000000000']=[['028db215-8bd7-45ab-bbaa-1efa175c35ca','长春'],['bcb32195-2a46-4cd1-9472-6383e8fa55cc','沈阳']]; var schools=new Array(); 
schools['028db215-8bd7-45ab-bbaa-1efa175c35ca']=[['5f22403a-7a59-4b7f-b62d-9451298cbd00','长春1'],['e8f0f665-9a9a-4c44-83fd-598e8a28dcd7','长春2']]; 
schools['bcb32195-2a46-4cd1-9472-6383e8fa55cc']=[['4a743dbf-1fdc-4907-a44e-8d169d715664','沈阳1']];

第一级为城市数据,第二级为学校数据。
第二步 设置数据在dropdown中显示
//根据父编号获取相应的子数据,并显示在obj控件中 
//type=0 城市,1学校 
//pid 父编号 
//obj 要显示数据的dropdown 
function SetRegions(type,pid,obj) 
{ 
var text="<option value='00000000-0000-0000-0000-000000000001'>请选择</option>"; 
var tempArray=new Array(); 
if(type==0){ 
tempArray=cities[pid]; 
} else if (type==1){ 
tempArray=schools[pid];; 
} 
if(tempArray!=null) 
{ 
for(var i=0;i<tempArray.length;i++){ 
text+="<option value='"+tempArray[i][0]+"'>"+tempArray[i][1]+"</option>"; 
} 
} 
$(obj).html(text); 
}

第三步 城市改变的时候 选择学校数据

//用城市编号设置学校子数据 
function CityChanged(){ 
SetRegions (1,$("#cities").val(),"#schools"); 
}

第四步 当然在修改的时候需要进行初始化,这也是以前我最头疼的问题

//初始化 城市 学校值 
//cityId 城市编号 
//schoolId 学校编号 
function InitRegions(cityId,schoolId) 
{ 
//初始化城市数据 
//SetRegions(0,"00000000-0000-0000-0000-000000000000","#cities"); 
//查找城市并设为默认值 
$("#cities option[value="+cityId+"]").attr("selected","selected"); 
if(schoolId!="00000000-0000-0000-0000-000000000001"){ 
//初始化学校数据 
SetRegions(1,cityId,"#schools"); 
//查找学校并设为默认值 
$("#schools option[value="+schoolId+"]").attr("selected","selected"); 
} 
}

前台代码

<%--城市--%> 
<select runat="server" id="cities" onchange="CityChanged();"> 
</select> 
<%--学校--%> 
<select runat="server" id="schools" > 
</select> 
<script type="text/javascript"> 
SetRegions(0,'00000000-0000-0000-0000-000000000000',"#cities");//设置城市第一级 
var cityId='<asp:Literal ID="Literal_cityId" runat="server"></asp:Literal>';//初始化的城市编号 
var schoolId= '<asp:Literal ID="Literal_schoolId" runat="server"></asp:Literal>';//初始化的学校编号 
InitRegions(cityId,schoolId);//初始化 
</script>

后台使用
后台初始化

Literal_cityId.Text = "";//初始化城市id 
Literal_schoolId.Text = "";//初始化学校id

后台获取选择项值
string cityId = Request.Form["cities"] == null ? “00000000-0000-0000-0000-000000000001”: Request.Form["cities"]; 
string schoolId = Request.Form["schools"] == null ? “00000000-0000-0000-0000-000000000001”: Request.Form["schools"];

至此基本就完事了
现在看看如何获取js联动数据文件

/// <summary> 
/// 生成区域js文件 
/// </summary> 
private void CreateRegions() 
{ 
#region 获取区域文件信息 
string _cities = "var cities=new Array();<br/>"; 
string _schools = "var schools=new Array();<br/>"; 
DAL.RegionInfo dalRegion = new DAL.RegionInfo(); 
#region 城市信息 
DataTable dtcity = dalRegion.GetList("parent_id='" + “00000000-0000-0000-0000-000000000000”+ "'").Tables[0]; 
_cities += "cities['" + ParentId + "']=["; 
foreach (DataRow c in dtcity.Rows) 
{ 
_cities += "['" + c["id"].ToString() + "','" + c["name"].ToString() + "'],"; 
#region 学校信息 
DataTable dtschool = dalRegion.GetList(" parent_id='" + c["id"] + "'").Tables[0]; 
if (dtschool == null || dtschool.Rows.Count == 0) 
{ 
continue; 
} 
_schools += "schools['" + c["id"].ToString() + "']=["; 
foreach (DataRow s in dtschool.Rows) 
{ 
_schools += "['" + s["id"].ToString() + "','" + s["name"].ToString() + "'],"; 
} 
_schools = _schools.TrimEnd(',') + "];<br/>"; 
#endregion 
} 
_cities = _cities.TrimEnd(',') + "];<br/>"; 
#endregion 
Response.Write(_cities + "<br/><br/>"); 
Response.Write(_schools + "<br/><br/>"); 
#endregion 
}

把页面输出的js联动数据直接复制到js文件中即可
其中也可以根据自己需要改为三级、多级联动,都是一样的道理。
希望能对大家有帮助

Javascript 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
js打开新窗口方法整理
Feb 17 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JavaScript Split()方法
Dec 18 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
微信小程序如何使用云开发
May 17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 #Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 #Javascript
XENON基于JSON变种
Jul 27 #Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 #Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 #Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 #Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 #Javascript
You might like
PHP 简单日历实现代码
2009/10/28 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
jQuery 表格插件整理
2010/04/27 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
angular2使用简单介绍
2016/03/01 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python 编码规范整理
2018/05/05 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python创建学生成绩管理系统
2019/11/22 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python 操作 MySQL数据库
2020/09/18 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
两只小狮子教学反思
2014/02/05 职场文书
人事代理委托书
2014/09/27 职场文书
社区结对共建协议书
2016/03/23 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
mysql函数全面总结
2021/11/11 MySQL
PHP获取学生成绩的方法
2021/11/17 PHP
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python