改写了一个xml+js三级联动效果,同时提一问
在ajax版块没人理.到这里来发.人气多
在网上找了一下,依照一篇文章的思路,具体出处哪里忘记了.改了一下,感觉还行.如果是单纯的国家地区的不必要写在数据库里,因为不会经常改动,写成xml就行了.如果是产品品牌,类别,产品名称这样的搜索就最好写在数据库里,因为后台需要时常更新.
首先建立一个xml文件
Area.xml
文件如下:
<?xml version= "1.0 " encoding= "utf-8 " ?>
<Root>
<country name= "中国 " id= "1001 ">
<province name= "广东 " id= "1001001 ">
<city name= "深圳 " id= "1001001001 "> </city>
<city name= "广州 " id= "1001001002 "> </city>
<city name= "珠海 " id= "1001001003 "> </city>
<city name= "东莞 " id= "1001001004 "> </city>
</province>
<province name= "浙江 " id= "1001002 ">
<city name= "杭州 " id= "1001002001 "> </city>
<city name= "温州 " id= "1001002002 "> </city>
</province>
</country>
<country name= "American " id= "1002 ">
<province name= "califonia " id= "1002001 ">
<city name= "newyork " id= "1002001001 "> </city>
</province>
</country>
</Root>
内容分三级:国家,省份,城市,每个节点都有id,name属性.分别显示在select的value和text里面
其次新建立一web页面,如test.aspx
内容如下:
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "test.aspx.cs " Inherits= "test " %>
<!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 language= "javascript " type= "text/javascript ">
//首先需要初始化
var xmlDoc;
var nodeIndex;
function getxmlDoc()
{
xmlDoc=new ActiveXObject( "Microsoft.XMLDOM ");
var currNode;
xmlDoc.async=false;
xmlDoc.load( "Area.xml ");
if(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert( "出错！ "+myErr.reason);
}
}
function Init()
{
//打开xlmdocm文档
getxmlDoc();
var dropElement1=document.getElementById( "Select1 ");
var dropElement2=document.getElementById( "Select2 ");
var dropElement3=document.getElementById( "Select3 ");
RemoveDropDownList(dropElement1);
RemoveDropDownList(dropElement2);
RemoveDropDownList(dropElement3);
var TopnodeList=xmlDoc.selectSingleNode( "Root ").childNodes;
if(TopnodeList.length> 0)
{
//国家列表
var country;
var province;
var city;
for(var i=0; i <TopnodeList.length; i++)
{
//添加列表项目
country=TopnodeList[i];
var eOption=document.createElement( "option ");
eOption.value=country.getAttribute( "id ");
eOption.text=country.getAttribute( "name ");
dropElement1.add(eOption);
}
if(TopnodeList[0].childNodes.length> 0)
{
//省份列表
for(var i=0;i <TopnodeList[0].childNodes.length;i++)
{
var id=dropElement1.options[0].value;
//默认为第一个国家的省份
province=TopnodeList[0];
var eOption=document.createElement( "option ");
eOption.value=province.childNodes[i].getAttribute( "id ");
eOption.text=province.childNodes[i].getAttribute( "name ");
dropElement2.add(eOption);
}
if(TopnodeList[0].childNodes[0].childNodes.length> 0)
{
//城市列表
for(var i=0;i <TopnodeList[0].childNodes[0].childNodes.length;i++)
{
var id=dropElement2.options[0].value;
//默认为第一个国家的第一个省份列表
city=TopnodeList[0].childNodes[0];
var eOption=document.createElement( "option ");
eOption.value=city.childNodes[i].getAttribute( "id ");
eOption.text=city.childNodes[i].getAttribute( "name ");
this.document.getElementById( "Select3 ").add(eOption);
}
}
}
}
}
贴子太长了.下面继续...
[解决办法]
太长了,看得费神,建议不要加:runan= "server ".
[解决办法]
顶一个在说 以后一定用的到 呵呵 我也早就不想把 城市名存放在数据库中了 呵呵
