Javascript+XML实现二级联动

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

<xml src="../XML/Area.xml" id="AreaXML"></xml>
<xml src="../XML/Level.xml" id="LevelXML"></xml>

<script language="javascript" type="text/javascript">
<!--

function GetObj(ctrl)
{
    return document.getElementById(ctrl);
}

function LoadAreaXML(XML,Select){
var Xnode=XML.XMLDocument.lastChild;
var i;
Select.length=0;
    for(i=0;i<Xnode.childNodes.length;i++)
    {
        var opt=document.createElement("option");
        opt.text=Xnode.childNodes[i].getAttribute('name');
        opt.value=Xnode.childNodes[i].getAttribute('value');
        Select.add(opt);
    }
}

function Select_onchange(ParentSelect,SonSelect,XML)
{
    var Pid=ParentSelect.value;
    var Xnode=XML.XMLDocument.lastChild;
    var SelectXnode;
    var i;
    SonSelect.length=0;
    for(i=0;i<Xnode.childNodes.length;i++)
    {
        if(Xnode.childNodes[i].getAttribute('value').toString()==Pid.toString())
        {
            SelectXnode=Xnode.childNodes[i];
            break;
        }
    }    
    SonSelect.length=0;
    for(i=0;i<SelectXnode.childNodes.length;i++)
    {
        var opt=document.createElement("option");
        opt.value=SelectXnode.childNodes[i].getAttribute('value');
        opt.text=SelectXnode.childNodes[i].nodeTypedValue;
        SonSelect.add(opt);   
    }
}


function LoadXML(XML,Select){
var Xnode=XML.XMLDocument.lastChild;
var i;
Select.length=0;
    for(i=0;i<Xnode.childNodes.length;i++)
    {
        var opt=document.createElement("option");
        opt.text=Xnode.childNodes[i].nodeTypedValue;
        opt.value=Xnode.childNodes[i].getAttribute('value');
        Select.add(opt);
    }
}

function Province_onchange() {
    var Province=GetObj("selectProvince");
    var City=GetObj('selectCity');
    var AreaXML=GetObj('AreaXML');
    Select_onchange(Province,City,AreaXML);
}



function window_onload() {
    var AreaXML=GetObj('AreaXML');
    var Province=GetObj('selectProvince');
    LoadAreaXML(AreaXML,Province);
    Province_onchange();
    
    var level = GetObj("SelectLevel");
    LoadXML(LevelXML,level);
}

// -->
</script>
</head>
<body onload="return window_onload()">
    <form id="form1" runat="server">
    <div>
    
        <select id="selectProvince" name="selectProvince" onchange="Province_onchange()">
            <option></option>
        </select><select id="SelectCity" name="SelectCity">
            <option></option>
        </select></div>
    </form>
    <select id="SelectLevel" name="SelectLevel">
        <option></option>
    </select>
</body>
</html>

Area.xml：
<?xml version="1.0" encoding="utf-8"?>
<Area>
  <province value="100" name="北京">
    <option value="a100">北京市</option>
  </province>
  <province value="200" name="上海">
    <option value="a200">上海市</option>
  </province>
  <province value="300" name="广东省">
    <option value="a302">广州市</option>
    <option value="a303">惠州市</option>
    <option value="a304">汕头市</option>
    <option value="a305">珠海市</option>
    <option value="a306">佛山市</option>
    <option value="a307">中山市</option>
    <option value="a308">东莞市</option>
    <option value="a310">从化市</option>
    <option value="a314">韶关市</option>
    <option value="a315">江门市</option>
    <option value="a316">增城市</option>
    <option value="a317">湛江市</option>
    <option value="a318">肇庆市</option>
    <option value="a319">清远市</option>
    <option value="a320">深圳市</option>
  </province>
  <province value="500" name="天津">
    <option value="a500">天津市</option>
  </province>
  <province value="600" name="重庆">
    <option value="a600">重庆市</option>
  </province>
  <province value="700" name="江苏省">
    <option value="a702">南京市</option>
    <option value="a703">苏州市</option>
    <option value="a704">无锡市</option>
    <option value="a705">常州市</option>
  </province>
  <province value="800" name="浙江省">
    <option value="a802">杭州市</option>
    <option value="a803">宁波市</option>
    <option value="a804">温州市</option>
  </province>
  <province value="900" name="四川省">
    <option value="a902">成都市</option>
  </province>
  <province value="1000" name="海南省">
    <option value="a1002">海口市</option>
  </province>
  <province value="1100" name="福建省">
    <option value="a1102">福州市</option>
    <option value="a1103">厦门市</option>
    <option value="a1104">泉州市</option>
    <option value="a1105">漳州市</option>
  </province>
  <province value="1200" name="山东省">
    <option value="a1202">济南市</option>
    <option value="a1203">青岛市</option>
    <option value="a1204">烟台市</option>
  </province>
</Area>

Level.xml：
<?xml version="1.0" encoding="utf-8" ?>
  <Level>
    <option value="1">初级</option>
    <option value="2">一般</option>
    <option value="3">熟练</option>
    <option value="4">精通</option>
  </Level>

posted on 2008-06-28 06:54  王丹小筑  阅读(524)  评论(0)    收藏  举报

导航