ASP.NET AJAX http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
<html> <head runat="server"> <title>二级联动</title> <script type="text/javascript"> function $(obj){return document.getElementById(obj)}; var aProvince=new Array("河北","北京","辽宁","吉林"); var aCity=new Array(new Array("石家庄","唐山","衡水","保定"), new Array("北京"), new Array("丹东","沈阳","大连"), new Array("长春","白山","吉林") ); function defaultLoad() { var oProvince=$("province"); var oCity=$("city"); loadProvince(oProvince); loadCity(oCity,0)
} function loadProvince(oProvince) { for(var i=0;i<aProvince.length;i++) { if(!n_Option) var n_Option=document.createElement('option'); n_Option.value=i; n_Option.text=aProvince[i]; oProvince.options.add(n_Option); n_Option=null; } } function loadCity(oCity,index) { for(var i=0;i<aCity[index].length;i++) { if(!n_Option) var n_Option=document.createElement('option'); n_Option.value=i; n_Option.text=aCity[index][i]; oCity.options.add(n_Option); n_Option=null; } } function changeIndex() { var iProvince=$("province").selectedIndex; var oCity=$("city"); //清空 oCity.options.length=0; loadCity(oCity,iProvince); } window.onload=function (){ defaultLoad(); $("province").onchange=changeIndex; } </script></head> <body> <form id="form1" runat="server"> <div> 省份:<select id="province"></select> 大学:<select id="city"></select><br /> </div> </form> </body> </html>
内附使用说明
麻烦大家给一个例子我。。
http://www.yongfa365.com/Item/ErJiLianDongSanJiLianDongDuoJiLianDongWuXianJiLianDongXiaLaLieBiaoHuoCaiDanZhuanTi.html
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
<head runat="server">
<title>二级联动</title> <script type="text/javascript">
function $(obj){return document.getElementById(obj)};
var aProvince=new Array("河北","北京","辽宁","吉林");
var aCity=new Array(new Array("石家庄","唐山","衡水","保定"),
new Array("北京"),
new Array("丹东","沈阳","大连"),
new Array("长春","白山","吉林")
);
function defaultLoad()
{
var oProvince=$("province");
var oCity=$("city");
loadProvince(oProvince);
loadCity(oCity,0)
}
function loadProvince(oProvince)
{
for(var i=0;i<aProvince.length;i++)
{
if(!n_Option)
var n_Option=document.createElement('option');
n_Option.value=i;
n_Option.text=aProvince[i];
oProvince.options.add(n_Option);
n_Option=null;
}
}
function loadCity(oCity,index)
{
for(var i=0;i<aCity[index].length;i++)
{
if(!n_Option)
var n_Option=document.createElement('option');
n_Option.value=i;
n_Option.text=aCity[index][i];
oCity.options.add(n_Option);
n_Option=null;
}
}
function changeIndex()
{
var iProvince=$("province").selectedIndex;
var oCity=$("city");
//清空
oCity.options.length=0;
loadCity(oCity,iProvince);
}
window.onload=function (){
defaultLoad();
$("province").onchange=changeIndex;
}
</script></head>
<body>
<form id="form1" runat="server">
<div>
省份:<select id="province"></select>
大学:<select id="city"></select><br />
</div>
</form>
</body>
</html>