動機:
それでは、IE に XML を適用する小さな例をやってみましょう。二重ドロップダウン メニューのリンクの問題を解決します。おそらく最も一般的な例は、州を選択してから都市のオプションを変更することです。そのため、XML を使用してこれを完了してみましょう。
以前に紹介した機能の一部は XML+XSL ファイルを直接使用して実装しましたが、その使い方があまり馴染みがないかもしれないので、今回は HMTL+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 ドロップダウン リストに追加します)
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>
追記:
たった今 XML を学び始めたとき、私も他の皆さんと同じように混乱していました - 「XML を学んだのに、どうやって使えばいいの?」この質問は長い間私を妨げてきました...
-コマースとソフトウェア開発は私の専門分野なので、自分が最もよく知っていることから始めるのが良いと思いました。そこで、Web サイト構築で最もよく使用される機能のいくつかを XML で実装しました。 あなたにもできるよ!
上記は、XML 編 (4) の実践的なヒントです。メニュー連携コンテンツの詳細については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。