两级联动的select,(XML版)
XML文件
<?xml version="1.0" encoding="GB2312"?>
<Root Title="PC Market List"><City Name="北京市" RecordNo="3"><Market Name="百脑汇电脑城" RecordNo="22"/><Market Name="硅谷电脑城" RecordNo="20"/><Market Name="海龙电脑城" RecordNo="21"/><Market Name="赛博数码广场" RecordNo="25"/><Market Name="太平洋电脑城" RecordNo="23"/><Market Name="中海电子市场" RecordNo="24"/></City><City Name="广州市" RecordNo="2"><Market Name="广州电脑城东城" RecordNo="11"/><Market Name="广州电脑城西城" RecordNo="12"/><Market Name="海印电脑城" RecordNo="16"/><Market Name="恒龙电脑城" RecordNo="19"/><Market Name="金百汇电脑城" RecordNo="18"/><Market Name="金茂电脑城" RecordNo="17"/><Market Name="太平洋电脑城" RecordNo="10"/><Market Name="天河电脑城" RecordNo="13"/><Market Name="五山科技街" RecordNo="14"/><Market Name="中六电脑城" RecordNo="15"/></City><City Name="上海市" RecordNo="4"><Market Name="百脑汇电脑城" RecordNo="27"/><Market Name="芙蓉江电脑城" RecordNo="30"/><Market Name="赛博数码广场" RecordNo="29"/><Market Name="赛格电脑城" RecordNo="28"/><Market Name="太平洋电脑城" RecordNo="26"/></City><City Name="深圳市" RecordNo="1"><Market Name="宝安电脑城" RecordNo="8"/><Market Name="都会100电脑城" RecordNo="7"/><Market Name="横岗电脑城" RecordNo="9"/><Market Name="宏大电子市场" RecordNo="4"/><Market Name="华强电子世界" RecordNo="2"/><Market Name="环球电脑城" RecordNo="6"/><Market Name="赛博电脑城" RecordNo="3"/><Market Name="赛格广场" RecordNo="1"/><Market Name="远望数码城" RecordNo="5"/></City></Root>
js文件
var MarketXMLDoc = new ActiveXObject("Msxml2.DOMDocument");
MarketXMLDoc.async = false;
MarketXMLDoc.load("/XML/MARKET_LIST.XML");
function GetMarketList(Type)
{
var Nodes;
switch (Type)
{
case "AllCitys" :
Nodes=MarketXMLDoc.getElementsByTagName("City");
break;
case "AllMarkets" :
Nodes=MarketXMLDoc.getElementsByTagName("Market");
break;
case "TheMarkets" :
CityId=arguments[arguments.length-1];
if(CityId!="")
{
Nodes=MarketXMLDoc.selectNodes(".//City[@RecordNo='" + CityId + "']//Market");
}
else
{
Nodes=MarketXMLDoc.selectNodes(".//City//Market");
}
break;
default :
break;
}
return Nodes;
}
function ChangeMarkets()
{
CityId=event.srcElement.options[event.srcElement.selectedIndex].value;
GenerateMarketList("TheMarkets","Market","","",CityId)
}
function ChangeMarketsEx()
{
CityId=event.srcElement.options[event.srcElement.selectedIndex].value;
GenerateMarketListEx("TheMarkets","_Market","","",CityId)
}
function GenerateMarketList(Type,Name,Style,Class)
{
var oList,oItem;
var CityId=arguments[arguments.length-1];
var Nodes=GetMarketList(Type,CityId);
if(Nodes.length==0) return;
switch (Type)
{
case "AllCitys" :
case "AllMarkets" :
oList=document.createElement("SELECT");
oList.style.cssText=Style;
oList.className=Class;
oList.name=Name;
oList.id=Name;
oList.onchange=(Type=="AllCitys"?"ChangeMarkets()":"");
break;
case "TheMarkets" :
oList=document.getElementsByName(Name)[0];
oList.innerHTML="";
break;
default :
break;
}
oItem=document.createElement("OPTION");
oItem.value="";
oItem.innerText="-搜索所有-";
oList.appendChild(oItem);
for(i=0;i<Nodes.length;i++)
{
oItem=document.createElement("OPTION");
oItem.value=Nodes[i].getAttribute("RecordNo");
oItem.innerText=Nodes[i].getAttribute("Name");
oList.appendChild(oItem);
}
return oList;
}
function InputAddress()
{
NewValue=event.srcElement.options[event.srcElement.selectedIndex].text
document.getElementById("Address1").value+=NewValue;
}
function GenerateMarketListEx(Type,Name,Style,Class,Callback)
{
var oList,oItem;
var CityId=arguments[arguments.length-1];
var Nodes=GetMarketList(Type,CityId);
if(Nodes.length==0) return;
switch (Type)
{
case "AllCitys" :
case "AllMarkets" :
oList=document.createElement("SELECT");
oList.style.cssText=Style;
oList.className=Class;
oList.name=Name;
oList.id=Name;
oList.onchange=((Type=="AllCitys"?"ChangeMarketsEx();":"")+Callback);
break;
case "TheMarkets" :
oList=document.getElementsByName(Name)[0];
oList.innerHTML="";
break;
default :
break;
}
oItem=document.createElement("OPTION");
oItem.value="";
oItem.innerText="-请选择-";
oList.appendChild(oItem);
for(i=0;i<Nodes.length;i++)
{
oItem=document.createElement("OPTION");
oItem.value=Nodes[i].getAttribute("RecordNo");
oItem.innerText=Nodes[i].getAttribute("Name");
oList.appendChild(oItem);
}
return oList;
}
调用语法:
<script language=javascript>
document.write(GenerateMarketList("AllCitys","City","width:85","button5").outerHTML);
document.write(GenerateMarketList("AllMarkets","Market","width:90","button5").outerHTML);
document.getElementById("City").name="City";
document.getElementById("Market").name="Market";
</script>