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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php不用正则验证真假身份证
2013/11/06 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
Vue中fragment.js使用方法详解
2017/03/09 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
vue如何判断dom的class
2018/04/26 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Node.js学习教程之Module模块
2019/09/03 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
详解vue 组件
2020/06/11 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python读写csv文件的方法
2019/08/13 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
新教师培训心得体会
2014/09/02 职场文书
学习心理学的体会
2014/11/07 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015年班干部工作总结
2015/04/29 职场文书
python实现自定义日志的具体方法
2021/05/28 Python