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 相关文章推荐
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jquery编写日期选择器
Mar 16 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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比较运算符的详细介绍
2015/09/29 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
微信小程序云开发详细教程
2019/05/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Tornado 多进程实现分析详解
2018/01/12 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
django+echart数据动态显示的例子
2019/08/12 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
windows支持哪个版本的python
2020/07/03 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
python SOCKET编程基础入门
2021/02/27 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
妇产医师自荐信
2014/01/29 职场文书
房地产广告策划方案
2014/05/15 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python