モチベーション：
ここで、IE に XML を適用する小さな例、つまりダブル ドロップダウン メニューのリンクの問題を解決してみましょう。おそらく最も一般的な例は、州を選択してから都市のオプションを変更することです。そのため、XML を使用してこれを完了してみましょう。
以前紹介した機能の中には、XML+XSL ファイルを使用して直接実装したものもあります。その使い方があまり馴染みがないかもしれないので、今回は HMTL+XML を使用して、皆さんにわかりやすく理解してもらいたいと思います。単純！" ：）
材料：
XML ボリューム選択メニューには、Citys.xml と CitySelect.htm の 2 つのファイルがリンクされています。
機能は次のとおりです。
州を選択すると、対応する都市が自動的に表示されるため、ユーザーにとって便利で、データのインタラクションが効果的に向上し、ページがよりカラフルになります。
効果：
ここを参照してください
コード：
都市.xml
<?xml バージョン="1.0" エンコーディング="gb2312"?>
＜中国＞
<州 id="1" name="江西省">
<都市>九江</都市>
<都市>南昌</都市>
<都市>廬山</都市>
<都市>景徳鎮</都市>
</状態>
<州 id="2" name="北京">
<都市>北京西</都市>
<都市>居永関</都市>
<都市>清華園</都市>
<都市>周口店</都市>
</状態>
<州 id="3" name="福建省">
<都市>福州</都市>
<都市>アモイ</都市>
<都市>漳州</都市>
</状態>
<State id="4" name="甘粛">
<都市>蘭州</都市>
<都市>ローメン</都市>
<都市>嘉峪関</都市>
</状態>
<州 id="5" name="広東省">
<都市>広州</都市>
<都市>深セン</都市>
<都市>東莞</都市>
<都市>シパイ</都市>
</状態>
<State id="6" name="安徽省">
<都市>合肥</都市>
<都市>黄山</都市>
<都市>九龍山</都市>
<都市>馬鞍山</都市>
</状態>
</中国>
CitySelect.htm
カスタム関数:ChooseState
(XML データ内の州の名前を読み取り、SelState のドロップダウン リストに追加します)
functionChooseState()
{
変数ソース;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM') //MSXML パーサー インスタンスを作成します。
ソース.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
(現在選択されている州名に基づいて XML データ内の対応する都市名を読み取り、SelCity ドロップダウン リストに追加します)
functionChooseCity()
{
x=form1.SelState.selectedIndex; // 都道府県ドロップダウン ボックスの現在のオプションを読み取ります。
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //name 属性値がパラメータ y に等しい State ノードの下のすべての都市ノードを検索します
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 name="セルシティ" id="セルシティ" >
</選択>
</FORM>
</BODY>
追記：
私も XML を初めて学習し始めたとき、他の皆さんと同じように混乱しました。「XML を学習しましたが、どのように使用すればよいのでしょうか?」この質問は、長い間、私を妨げてきました
。とソフトウェア開発は私の専門分野なので、自分が最もよく知っていることから始めるのが良いと思いました。そこで、Web サイト構築で最もよく使用される機能のいくつかを XML で実装しました。 あなたにもできるよ！