suchen

Heim >Backend-Entwicklung >XML/RSS-Tutorial >XML Practical Cheats Band 4: Menüverknüpfung

XML Practical Cheats Band 4: Menüverknüpfung

巴扎黑
巴扎黑Original
2017-03-19 15:45:281580Durchsuche

[Einführung] Lassen Sie uns nun ein kleines Beispiel für die Verwendung von XML im IE erstellen: Lösen des Verknüpfungsproblems von doppelten Dropdown-Menüs. Das vielleicht häufigste Beispiel besteht darin, eine Provinz auszuwählen und dann die Stadtoptionen zu ändern. Versuchen wir also, XML zu verwenden, um es zu vervollständigen. Einige der Funktionen, die ich zuvor vorgestellt habe, wurden direkt mithilfe von XML+XSL-Dateien implementiert.

Jetzt machen wir ein kleines Beispiel für die Anwendung von XML im IE: Lösen des Verknüpfungsproblems von doppelten Dropdown-Menüs. Das vielleicht häufigste Beispiel besteht darin, eine Provinz auszuwählen und dann die Stadtoptionen zu ändern. Versuchen wir also, XML zu verwenden, um es zu vervollständigen.

Ich habe einige der zuvor eingeführten Funktionen direkt mithilfe von XML+XSL-Dateien implementiert. Sie sind möglicherweise nicht sehr vertraut mit der Verwendung, daher werde ich dieses Mal HMTL+XML verwenden, in der Hoffnung, alle damit vertrauter zu machen . Klares Verständnis – „XML kann so einfach sein!“ :)


Materialien:
XML-Volume-Menüverknüpfung
Es gibt 2 Dateien: Citys.xml und CitySelect.htm

Funktion:
Nach Auswahl einer Provinz kann die entsprechende Stadt automatisch angezeigt werden, was für Benutzer praktisch ist, die Dateninteraktion effektiv verbessert und Ihre Seite bunter macht.
Effekt:
Hier durchsuchen
Code:
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

Benutzerdefinierte Funktion : ChooseState
(Lesen Sie den Namen der Provinz in den XML-Daten und fügen Sie ihn zur SelState-Dropdown-Liste hinzu)

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();
}


Benutzerdefinierte Funktion: ChooseCity
(Lesen Sie den entsprechenden Städtenamen in den XML-Daten basierend auf dem aktuell ausgewählten Provinznamen und fügen Sie ihn zur Dropdown-Liste „SelCity“ hinzu)

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); 
  }
}




Quellcode bilden

<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>



Postscript:
Als ich anfing, XML zu lernen, hatte ich die gleiche Verwirrung wie alle anderen --- „Ich habe XML gelernt.“ Aber wie soll ich dieses XML nutzen? . Beginnen wir mit etwas Bekanntem. Deshalb habe ich einige der am häufigsten verwendeten Funktionen beim Website-Aufbau in XML implementiert. Du schaffst es auch!                                                                              

Das obige ist der detaillierte Inhalt vonXML Practical Cheats Band 4: Menüverknüpfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：XML Practical Cheats Band 3: Dynamische PaginierungNächster Artikel：XML Practical Cheats Band 3: Dynamische Paginierung

In Verbindung stehende Artikel

Mehr sehen