表结构
二级或多级联动主要是以数据库中具有父编号的表为基础，这个也不例外
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=请选择;
var temparray=new array();
if(type==0){
temparray=cities[pid];
} else if (type==1){
temparray=schools[pid];;
}
if(temparray!=null)
{
for(var i=0;itext+=+temparray[i][1]+;
}
}
$(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);
}
}
前台代码
复制代码 代码如下:
后台使用
后台初始化
复制代码 代码如下:
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联动数据文件
复制代码 代码如下:
///
/// 生成区域js文件
///
private void createregions()
{
#region 获取区域文件信息
string _cities = var cities=new array();
;
string _schools = var schools=new array();
;
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(',') + ];
;
#endregion
}
_cities = _cities.trimend(',') + ];
;
#endregion
response.write(_cities +
);
response.write(_schools +
);
#endregion
}
把页面输出的js联动数据直接复制到js文件中即可
其中也可以根据自己需要改为三级、多级联动，都是一样的道理。
希望能对大家有帮助