ホームページ > 記事 > バックエンド開発 > XMLボリューム実践Tips(4):メニュー連携

XMLボリューム実践Tips(4):メニュー連携

黄舟オリジナル: 2017-02-10 16:18:331549ブラウズ

動機:
それでは、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(&#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();
}

自己定義関数:ChooseCity
(現在選択されている州名に基づいてXMLデータ内の対応する都市名を読み取り、SelCityドロップダウンリストに追加します)

function ChooseCity()
{
  x=form1.SelState.selectedIndex;   //读取省份下拉框的当前选项
  y=form1.SelState.options[x].value;
  sortField=root.selectNodes("//State[@name=&#39;"+y+"&#39;]/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(&#39;OPTION&#39;);
    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 サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：XML ボリュームの実践的なヒント (3): 動的ページング次の記事：XML ボリュームの実践的なヒント (3): 動的ページング

続きを見る

XMLボリューム実践Tips(4):メニュー連携

関連記事