以ASP.NET为例实现省市区的三级联动
{
// 初始化省
string sql = " select 序号,省名 from 省表 " ;
SqlCommand comm = new SqlCommand(sql,conn);
province.Items.Clear();
province.Items.Add( new ListItem( " -=请选择=- " , " 0 " ));
conn.Open();
SqlDataReader dr = comm.ExecuteReader();
while (dr.Read())
{
province.Items.Add( new ListItem(dr[ 1 ].ToString(),dr[ 0 ].ToString()));
}
dr.Close();
// 初始化市
city.Items.Add( new ListItem( " -=请选择=- " , " 0 " ));
// 初始化区
town.Items.Add( new ListItem( " -=请选择=- " , " 0 " ));
sql = " select 省名,市名,区名 from 省表,市表,区表 where 省表.序号=市表.省ID and 市表.序号=区表.市ID " ;
comm.CommandText = sql;
dr = comm.ExecuteReader();
int i = 0 ;
while (dr.Read())
{
// 将信息隐藏的写到页面中
myPage.RegisterClientScriptBlock(i.ToString(), " <input type=hidden name=info value= " + dr[ 0 ].ToString() + " $ " + dr[ 1 ].ToString() + " $ " + dr[ 2 ].ToString() + " > " );
i ++ ;
}
conn.Close();
}
JS脚本,DropDownList的change事件
//在省框选项变化时,初始化市、区框中的选项
function cProvince()
{
//if (document.forms[0].province.selectedIndex==0)
{
//清空下拉列表框
document.forms[0].city.options.length=0;
document.forms[0].town.options.length=0;
//给下拉列表框添加初始项
document.forms[0].city.options[0]=new Option("-=请选择=-","0");
document.forms[0].town.options[0]=new Option("-=请选择=-","0");
}
var p=document.forms[0].province.options(document.forms[0].province.selectedIndex).text;
var temp="";
for(i=0;i<document.forms[0].info.length;i++)
{
var str=document.forms[0].info[i].value.split("$");
if (str[0]==p)
{
for(j=0;j<document.forms[0].city.options.length;j++) //遍历下拉列表框看是否已经存在该项
{
if (document.forms[0].city.options[j].text==str[1])
{
temp=str[1]; //说明该下拉列表中有该项了,以便在接下来的循环中进行判断
break;
}
}
if (temp==str[1]) //如果下拉列表中已经存在该项,不再添加
{
continue;
}
var num=document.forms[0].city.options.length;
document.forms[0].city.options[num]=new Option(str[1],num);
}
}
document.forms[0].ptext.value=document.forms[0].province.options[document.forms[0].province.selectedIndex].text
}
//市框选项发生变化时,初始化区框
function cCity()
{
//if (document.forms[0].city.selectedIndex==0)
{
document.forms[0].town.options.length=0;
document.forms[0].town.options[0]=new Option("-=请选择=-","0")
}
var c=document.forms[0].city.options(document.forms[0].city.selectedIndex).text;
var temp="";
for(i=0;i<document.forms[0].info.length;i++)
{
var str=document.forms[0].info[i].value.split("$");
if (str[1]==c)
{
if (temp!=str[2]) //如果下拉列表中已经存在该项,不再添加
{
//continue;
var num=document.forms[0].town.options.length;
document.forms[0].town.options[num]=new Option(str[2],num);
temp=str[2]; //说明该下拉列表中有该项了,以便在接下来的循环中进行判断
}
}
}
document.forms[0].ctext.value=document.forms[0].city.options[document.forms[0].city.selectedIndex].text
}