Rss订阅

首页 »Ajax教程 » 下拉框ajax:Ajax实现无刷新三联动下拉框1 »正文

下拉框ajax:Ajax实现无刷新三联动下拉框1

来源: 发布时间:星期日, 2008年10月19日浏览:650次评论:0

<HTML>

<HEAD>

<title>Ajax实现无刷新三联动下拉框</title>

<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">

<meta content="C#" name="CODE_LANGUAGE">

<meta content="JavaScript" name="vs_defaultClientScript">

<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

<SCRIPT language="javascript">

//城市------------------------------

function cityResult()

{

var city=document.getElementById("DropDownList1");

AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);

}

function get_city_Result_CallBack(response)

{

if (response.value != null)

{

//debugger;

document.all("DropDownList2").length=0;　　　　

　　　　 var ds = response.value;

if(ds != null && typeof(ds) == "object" && ds.Tables != null)

{

for(var i=0; i<ds.Tables[0].Rows.length; i++)

　　　　

{

　　　　 var name=ds.Tables[0].Rows.city;
　　　　　　 var id=ds.Tables[0].Rows.cityID;
　　　　　　 document.all("DropDownList2").options.add(new Option(name,id));
　　　　 }
}
}
return
}
//市区----------------------------------------
function areaResult()
{
var area=document.getElementById("DropDownList2");
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}
function get_area_Result_CallBack(response)
{
if (response.value != null)
{
document.all("DropDownList3").length=0;　　　　
　　　　 var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　 {
　　　　　　 var name=ds.Tables[0].Rows.area;
　　　　　　 var id=ds.Tables[0].Rows.areaID;
　　　　　　 document.all("DropDownList3").options.add(new Option(name,id));
　　　　 }
}
}
return
}
function getData()
{
var province=document.getElementById("DropDownList1");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;

var city=document.getElementById("DropDownList2");
var cindex = city.selectedIndex;
var cValue = city.options[cindex].value;
var cText = city.options[cindex].text;

var area=document.getElementById("DropDownList3");
var aindex = area.selectedIndex;
var aValue = area.options[aindex].value;
var aText = area.options[aindex].text;

var txt=document.getElementById("TextBox1");

document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
}
</SCRIPT>
</HEAD>
<body ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
cellPadding="1" width="300" border="1" bgColor="#ccff66">
<TR>
<TD>省市</TD>
<TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
</TR>
<TR>
<TD>城市</TD>
<TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>

标签：下拉框联动 ajax联动 ajax三级联动下拉框ajax

下载文章的 PDF文档电子版离线看

1

我顶

相关文章

ajax二级联动:ajax二级联动菜单

下拉框联动:在一个jsp页面实现二级下拉框联动，实时读取数据库数据

二级联动下拉框:使用AjaxPro开发四级无刷新联动下拉框

ajax三级联动:一个好的Ajax四级联动菜单

ajax下拉框 Ajax联动下拉框的实现例子

读者评论

发表评论

昵称：

内容：

更多

热门标签

精华推荐

更多

最新标签

Dig排行

阅读排行

最新文章