如何用AJAX 实现无刷新省份级联

y315728570 2010-01-13 12:30:52

如题

...全文

127 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiangchengboy 2010-01-13

打赏
举报

http://download.csdn.net/source/1926512

指间的风 2010-01-13

打赏
举报

呵呵，真是的是一大堆。

一路有你 2010-01-13

打赏
举报

给老子分数 OK ？？？

xray2005 2010-01-13

打赏
举报

纠正-》最贱的方法：应该是最简单的方法。

一路有你 2010-01-13

打赏
举报

杨JJ 真装B

xray2005 2010-01-13

打赏
举报

最贱的方法，使用asp.net ajax
如下：



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    </div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <asp:DropDownList ID="droplistProvince" runat="server" 

                onselectedindexchanged="droplistProvince_SelectedIndexChanged">

            </asp:DropDownList>

            <asp:DropDownList ID="droplistCity" runat="server">

            </asp:DropDownList>

        </ContentTemplate>

    </asp:UpdatePanel>

    </form>

</body>

</html>



 protected void droplistProvince_SelectedIndexChanged(object sender, EventArgs e)

        {

            //根据DropListProvince的SelectValue查询数据库数据，绑定到DropListCity

        }

ouc_ajax 2010-01-13

打赏
举报

可以看看AjaxPanal,那个控件对ajax支持很好.个人感觉挺好用的。
你要是想用代码自己实现，我以前做过类似的，首先要有js脚本，就是客户端处理
，还有服务器端接收请求返回数据。具体代码：
var minSelect=0;
var xmlHttp;

///<params name='majornum'>the value of the select</params>
///<params name='majornum'>the select need to change</params>
///<params name='majornum'>the type of the select</params>
function callAjax(majornum,index,type)
{
minSelect=index;
// call ajax function
ajaxsubmit("HttpHandler/GetDbTable.ashx?type="+encodeURIComponent(type)+"&guid="+encodeURIComponent(majornum),"updateCitysList");
}
//creat xmlHttp
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//clean select
function clearCityList(citys){
while(citys.childNodes.length > 0){
citys.removeChild(citys.childNodes[0]);
}
}
function ajaxsubmit(url,backfunction)
{
functionname =backfunction;
createXMLHttpRequest();
if (xmlHttp)
{
xmlHttp.onreadystatechange = handleStateChange;
try
{
xmlHttp.open("POST", url, false);
} catch (e)
{
alert(e);
}
xmlHttp.send();
}
}

//back function
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var xmldocument = xmlHttp.responseXML;
if (null != xmldocument.getElementsByTagName("SessionTimeOut")[0])
{
window.location.href = window.location.href;
updateCitysList();
return;
}
eval(functionname + "(xmldocument)");
} else {
alert("errorNumber:"+xmlHttp.status);
alert("Problem: " + xmlHttp.statusText);
}
}
}
//updata select
function updateCitysList(xmldocument){

clearCityList(minSelect);
var root = xmldocument.getElementsByTagName("root")[0];
if(root == null)
{
return;
}
var rootchilds = root.childNodes;
var rootchildchilds;
var option ;
for (var i = 0; i < rootchilds.length; i++) {
rootchildchilds = rootchilds[i].childNodes;
option = new Option();
option.value = rootchildchilds[0].text;
option.text = rootchildchilds[1].text;
minSelect.add(option);
}
}

//The onchange event of the first select (The system select)
function sysCallAjax(majornum,index,type)
{
callAjax(majornum,index,type);
document.getElementById("hidDbType").value = index.options[index.selectedIndex].value;
//Change the third select(dropDbTable) while change the first select .
var table = document.getElementById("dropDbTable");
while(table.options.length > 1){
table.removeChild(table.options[1]);
}
document.getElementById("hidTable").value = table.options[0].value;
}

页面PageLoad的时候给控件加上事件。 this.dropSys.Attributes.Add("onchange","javascript:sysCallAjax(this.options[this.selectedIndex].value,document.getElementById('dropDbType'),0);");

另外再自己写个页面相应请求，返回具体数据就可以了。