asp.net实现DropDownList、ListBox无刷新三级联动(javascript)

此为DropDownList无刷新三级联动的另一种方法，使用javascript操作，因是在客户端操作，所以切换速度较快，但如果数据量大时，加载时会稍慢点，下一篇文章我会发布针对此方法的改进方案，供大家参考。此为DropDownList示例，ListBox只需略加修改。

数据库为国家统计局最新的行政区划，自己又加入了香港、台湾、澳门的行政区划，需要的朋友可直接下载使用。
数据库下载
/Files/netshuai/area.rar

aspx页面代码

<% =strAreaData %>
<script language = "JavaScript" type="text/javascript">

function changearea1()
{
document.all("<% =Ddl_AreaTwo.ClientID %>").length = 0;
document.all("<% =Ddl_AreaTwo.ClientID %>").options[0] = new Option('选择城市','0');
document.all("<% =Ddl_AreaThree.ClientID %>").length = 0;
document.all("<% =Ddl_AreaThree.ClientID %>").options[0] = new Option('选择城市','0');
var oneid=document.all("<% =Ddl_AreaOne.ClientID %>").value;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == oneid)
{
document.all("<% =Ddl_AreaTwo.ClientID %>").options[document.all("<% =Ddl_AreaTwo.ClientID %>").length] = new Option(subcat[i][0], subcat[i][2]);
}
}

}

function changearea2()
{
document.all("<% =Ddl_AreaThree.ClientID %>").length = 0;
document.all("<% =Ddl_AreaThree.ClientID %>").options[0] = new Option('选择城市','0');
var twoid=document.all("<% =Ddl_AreaTwo.ClientID %>").value;
var oneid=document.all("<% =Ddl_AreaOne.ClientID %>").value;
var i;
for (i=0;i < onecount1; i++)
{
if (subcat1[i][2] == twoid)
{
if (subcat1[i][1] == oneid)
{
document.all("<% =Ddl_AreaThree.ClientID %>").options[document.all("<% =Ddl_AreaThree.ClientID %>").length] = new Option(subcat1[i][0], subcat1[i][3]);
}
}
}
}

</script>
<asp:DropDownList ID="Ddl_AreaOne" runat="server" AppendDataBoundItems="True">
<asp:ListItem Value="0">请选择</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="Ddl_AreaTwo" runat="server" >
<asp:ListItem Value="0">请选择</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="Ddl_AreaThree" runat="server" >
<asp:ListItem Value="0">请选择</asp:ListItem>
</asp:DropDownList>

cs页面代码

protected string strAreaData;
protected void Page_Load(object sender, EventArgs e)
{
Ddl_AreaOne.Attributes.Add("onchange", "changearea1()");
Ddl_AreaTwo.Attributes.Add("onchange", "changearea2()");
string strSQL;
strSQL = "select * from nts_area where oneid<>0 and twoid=0 and threeid=0 order by sort";
Ddl_AreaOne.DataSource = DataClass.GetDataReader(strSQL);
Ddl_AreaOne.DataTextField = "areaname";
Ddl_AreaOne.DataValueField = "oneid";
Ddl_AreaOne.DataBind();
strAreaData = "<script language = 'JavaScript' type='text/javascript'>var onecount;onecount=0;subcat = new Array();";
strSQL = "select * from nts_area where oneid<>0 and twoid<>0 and threeid=0 order by sort";
string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
OleDbConnection cnn = new OleDbConnection(ConnectionString);
cnn.Open();
OleDbCommand cmd=new OleDbCommand(sql, cnn);
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
int i1 = 0;
while (dr.Read())
{
strAreaData += "subcat[" + i1.ToString() + "] = new Array('" + dr["areaname"].ToString() + "','" + dr["oneid"].ToString() + "','" + dr["twoid"].ToString() + "');";
i1++;

}
strAreaData += "onecount=" + i1.ToString() + ";";

//添加三级地区
strAreaData += "var onecount1;onecount1=0;subcat1 = new Array();";

strSQL = "select * from nts_area where oneid<>0 and twoid<>0 and threeid<>0 order by sort";
cnn.Open();
cmd.CommandText = strSQL;
cmd.Connection = cnn;
dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
int n1 = 0;
while (dr.Read())
{
strAreaData += "subcat1[" + n1.ToString() + "] = new Array('" + dr["areaname"].ToString() + "','" + dr["oneid"].ToString() + "','" + dr["twoid"].ToString() + "','" + dr["threeid"].ToString() + "');"; n1++;

}
dr.Close();
strAreaData += "onecount1=" + n1.ToString() + ";</script>";
}

/article/6020077.html