当前页面位置: » 丰搜网 » 文档中心 » 详细内容
xml卷之实战锦囊（4）：选单连动
xml卷之选单连动
有2个文件：citys.xml 和 cityselect.htm
作用：
选择省份后可以自动显示相对应的城市，这样方便用户，有效的提高数据互动，让自己的页面更加绚丽多彩。
效果：
浏览这里
代码：
citys.xml
<?xml version="1.0" encoding="gb2312"?>
<china>
<state id="1" name="江西">
<city>九江</city>
<city>南昌</city>
<city>庐山</city>
<city>景德镇</city>
</state>
<state id="2" name="北京">
<city>北京西</city>
<city>居庸关</city>
<city>清华园</city>
<city>周口店</city>
</state>
<state id="3" name="福建">
<city>福州</city>
<city>厦门</city>
<city>漳州</city>
</state>
<state id="4" name="甘肃">
<city>兰州</city>
<city>洛门</city>
<city>嘉峪关</city>
</state>
<state id="5" name="广东">
<city>广州</city>
<city>深圳</city>
<city>东莞</city>
<city>石牌</city>
</state>
<state id="6" name="安徽">
<city>合肥</city>
<city>黄山</city>
<city>九龙岗</city>
<city>马鞍山</city>
</state>
</china>
cityselect.htm
自定义函数：choosestate
(读取xml数据中的省的名称，并增加到selstate的下拉列表中)
function choosestate()
{
var source;
var sourcename = "citys.xml";
var source = new activexobject('microsoft.xmldom'); //创建一个 msxml解析器实例
source.async = false;
source.load(sourcename); //装入xml文档
root = source.documentelement; //设置文档元素为根节点元素
sortfield=root.selectnodes("//@name"); //搜索属性中含有name的所有节点
for(var i=0;i<sortfield.length;++i) //增加省份名称到下拉列表
{
var ooption = document.createelement('option');
ooption.text = " "+sortfield[i].text+" ";
ooption.value = sortfield[i].text;
form1.selstate.options.add(ooption);
}
choosecity();
}
自定义函数：choosecity
(根据当前选定的省名来读取xml数据中的对应城市名称，并增加到selcity 的下拉列表中)
function choosecity()
{
x=form1.selstate.selectedindex; //读取省份下拉框的当前选项
y=form1.selstate.options[x].value;
sortfield=root.selectnodes("//state[@name='"+y+"']/city&q uot;); //搜索name属性值等于
参数y的state节点下的所有city节点
for(var i=form1.selcity.options.length-1;i>=0;--i) //撤消原来的列表项
{
form1.selcity.options.remove(i)
}
for(var i=0;i<sortfield.length;++i) //增加城市名称到下拉列表
{
var ooption = document.createelement('option');
ooption.text = " "+sortfield[i].text+" ";
ooption.value = sortfield[i].text;
form1.selcity.options.add(ooption);
}
}
表单源码
<body onload="choosestate()">
<form action="" method="post" id="form1" name="form1">
<select name="selstate" id="selstate" onchange="choosecity()" >
</select>
<select name="selcity" id="selcity" >
</select>
</form>
</body>
