XML卷之實戰錦囊(4):選單連動

黄舟
發布: 2017-02-10 16:18:33
原創
1498 人瀏覽過

動機:
現在我們做個在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>
登入後複製

CitySelect.htm

自訂函數:ChooseState
(讀取XML資料中的省份的名稱,並增加到SelState的下拉列表中)定義函數:ChooseCity
(根據目前選取的省名來讀取XML資料中對應的城市名稱,並增加到SelCity 的下拉清單中)

function ChooseState()
{
  var source;
  var sourceName = "Citys.xml";
  var source = new ActiveXObject(&#39;Microsoft.XMLDOM&#39;);   //创建一个 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(&#39;OPTION&#39;);
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
     form1.SelState.options.add(oOption); 
  }
   ChooseCity();
}
登入後複製

 

開始學XML的時候,我也有著和大家一樣的迷惑--- 「XML我是學了,可究竟這XML該怎麼用呢?」這個問題阻難了我很久,很久......

因為電子商務和軟體開發是我的專長,所以我覺得還是從我身邊最熟悉的開始做起。所以我將網站建置中最常用到的一些功能以XML的方式完成。 你也一樣可以的!
以上就是XML卷之實戰錦囊(4):選單連動的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!

相關標籤:
xml
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!