XML卷之实战锦囊(4)选单连动

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

动机：

现在我们做个在IE里应用XML的一个小例子：解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了，那我们就来尝试着用XML来完成吧。　

以前介绍的一些功能我是直接用XML XSL文件来完成的，大家可能还不是很熟悉它的用法，所以我这次就用HMTL XML来做，希望能够让大家更清楚的了解--“XML原来可以如此简单！”：）

材料：

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>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>