| ylbtech-LearningNotes:LNotes-ASP.NET-手风琴。省市县三连动(1,普通方法；2,Xpath方法) |
手风琴。省市县三连动(1,普通方法；2,Xpath方法)。
| |
|
| 手风琴 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
<script type="text/javascript" src="Js/Ajax.js"></script>
<script type="text/javascript">
function fun(catid)
{
//alert(catid);
var a=new Ajax();
var url="Show.aspx?catid="+catid;
a.callback=function()
{
if(a.xmlhttp.readyState==4)
{
var data=a.xmlhttp.responseXML;
var protd=document.getElementById("protd"+catid);
var s1="";
var products=data.getElementsByTagName("product");
for(i=0;i<products.length;i++)
{
var product=products[i];
s1+="<a href='#'>"+product.getElementsByTagName("name")[0].firstChild.data+"</a><br>";
}
protd.innerHTML=s1;
if(protd.parentNode.style.display=="none")
{
protd.parentNode.style.display="";
}
else
{
protd.parentNode.style.display="none";
}
}
}
a.sendRequest("get",url,null);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="RepCate" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<a href='<%#string.Format("ShowCategory.aspx?cateid={0}",Eval("categoryid")) %>' onmouseover='<%#string.Format("fun({0})",Eval("categoryid")) %>' ><%#Eval("categoryname") %></a>
</td>
</tr>
<tr style=" display:none; background-color:pink">
<td id='<%#string.Format("protd{0}",Eval("categoryid")) %>' style="padding-left:20px">
//关键点 上 区分ID
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
|
| |
|
| 省市县三连动 |
|
| 方法一(普通方法) |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
<script type="text/javascript" src="Js/Ajax.js"></script>
<script type="text/javascript">
var data=null;//数据设为全局的
function fillProv()
{
var a=new Ajax();
a.callback=function()
{
if(a.xmlhttp.readyState==4)
{
data=a.xmlhttp.ResponseXML;
var provsel=document.getElementById("provSelect");
var provs=data.getElementsByTagName("prov");
for(i=0;i<provs.length;i++)
{
var prov=provs[i];
//alert(prov.getAttribute("text"));
var op=new Option(prov.getAttribute("text"),prov.getAttribute("text"));
provsel.options[i]=op;
}
fillCity(); //查完省 立即到用 查市
}
}
a.sendRequest("get","district.xml",null);
}
function fillCity()
{
var provsel=document.getElementById("provSelect");
var citysel=document.getElementById("citySelect");
citysel.options.length=0;//一定要先清空表格
var currentProv=provsel.value;
var provs=data.getElementsByTagName("prov");
for(i=0;i<provs.length;i++)
{
var prov=provs[i];
if(prov.getAttribute("text")==currentProv)
{
var citys=prov.getElementsByTagName("city");
for(j=0;j<citys.length;j++)
{
var city=citys[j];
var op=new Option(city.getAttribute("text"),city.getAttribute("text"));
citysel.options[j]=op;
}
}
}
fillCounty();
}
function fillCounty()
{
var provsel=document.getElementById("provSelect");
var citysel=document.getElementById("citySelect");
var countysel=document.getElementById("countySelect");
countysel.options.length=0;
var currentProv=provsel.value;
var currentCity=citysel.value;
var provs=data.getElementsByTagName("prov");
for(i=0;i<provs.length;i++)
{
var prov=provs[i];
if(prov.getAttribute("text")==currentProv)
{
var citys=prov.getElementsByTagName("city");
for(j=0;j<citys.length;j++)
{
var city=citys[j];
if(city.getAttribute("text")==currentCity)
{
var countys=city.getElementsByTagName("county");
for(k=0;k<countys.length;k++)
{
var county=countys[k];
var op=new Option(county.getAttribute("text"),county.getAttribute("text"));
countysel.options[k]=op;
}
}
}
}
}
}
</script>
</head>
<body onload="fillProv()">
<form id="form1" runat="server">
<div>
省<select id="provSelect" onchange="fillCity()" ></select>
市<select id="citySelect" onchange="fillCounty()"></select>
县区<select id="countySelect" ></select>
</div>
</form>
</body>
</html>
|
| |
|
| 方法二(Xpath方法) |
|
| |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
<script type="text/javascript" src="Js/Ajax.js"></script>
<script type="text/javascript">
var data=null;
function fillProv()
{
var a=new Ajax();
a.callback=function()
{
if(a.xmlhttp.readyState==4)
{
data=a.xmlhttp.ResponseXML;
var provsel=document.getElementById("provSelect");
var provs=data.getElementsByTagName("prov");
for(i=0;i<provs.length;i++)
{
var prov=provs[i];
//alert(prov.getAttribute("text"));
var op=new Option(prov.getAttribute("text"),prov.getAttribute("text"));
provsel.options[i]=op;
}
fillCity();
}
}
a.sendRequest("get","district.xml",null);
}
function fillCity()
{
var provsel=document.getElementById("provSelect");
var citysel=document.getElementById("citySelect");
citysel.options.length=0;
var currentProv=provsel.value;
var citys=data.getElementsByTagName("district/prov[@text='"+currentProv+"']/city");//从data中查,结合Xpath方法
for(j=0;j<citys.length;j++)
{
var city=citys[j];
var op=new Option(city.getAttribute("text"),city.getAttribute("text"));
citysel.options[j]=op;
}
fillCounty();
}
function fillCounty()
{
var provsel=document.getElementById("provSelect");
var citysel=document.getElementById("citySelect");
var countysel=document.getElementById("countySelect");
countysel.options.length=0;
var currentProv=provsel.value;
var currentCity=citysel.value;
var countys=data.getElementsByTagName("district/prov[@text='"+currentProv+"']/city[@text='"+currentCity+"']/county");
for(k=0;k<countys.length;k++)
{
var county=countys[k];
var op=new Option(county.getAttribute("text"),county.getAttribute("text"));
countysel.options[k]=op;
}
}
</script>
</head>
<body onload="fillProv()">
<form id="form1" runat="server">
<div>
省<select id="provSelect" onchange="fillCity()" ></select>
市<select id="citySelect" onchange="fillCounty()"></select>
县区<select id="countySelect" ></select>
</div>
</form>
</body>
</html>
|
无。
