Motivation:
Lassen Sie uns nun ein kleines Beispiel für die Anwendung von XML im IE erstellen: Wir lösen das Verknüpfungsproblem doppelter 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 eingeführt habe, wurden direkt mithilfe von XML+XSL-Dateien implementiert. Sie sind möglicherweise nicht sehr vertraut mit deren Verwendung, daher werde ich dieses Mal HMTL+XML verwenden, in der Hoffnung, allen ein klareres Verständnis zu vermitteln – „XML kann so sein.“ einfach!" :)
Material:
Es gibt zwei Dateien, die mit dem XML-Volume-Auswahlmenü verknüpft sind: Citys.xml und CitySelect.htm.
Die Funktionen sind:
Nach Auswahl einer Provinz kann automatisch die entsprechende Stadt angezeigt werden, was für Benutzer praktisch ist, die Dateninteraktion effektiv verbessert und Ihre Seite bunter macht.
Wirkung:
Stöbern Sie hier
Code:
Städte.xml
<?xml version="1.0"kodierung="gb2312"?>
<China>
<State id="1" name="Jiangxi">
<Stadt>Jiujiang</Stadt>
<Stadt>Nanchang</Stadt>
<Stadt>Lushan</Stadt>
<Stadt>Jingdezhen</Stadt>
</State>
<State id="2" name="Peking">
<Stadt>Peking West</Stadt>
<Stadt>Juyongguan</Stadt>
<Stadt>Tsinghua-Garten</Stadt>
<Stadt>Zhoukoudian</Stadt>
</State>
<State id="3" name="Fujian">
<Stadt>Fuzhou</Stadt>
<Stadt>Xiamen</Stadt>
<Stadt>Zhangzhou</Stadt>
</State>
<State id="4" name="Gansu">
<Stadt>Lanzhou</Stadt>
<Stadt>Lomen</Stadt>
<Stadt>Jiayuguan</Stadt>
</State>
<State id="5" name="Guangdong">
<Stadt>Guangzhou</Stadt>
<Stadt>Shenzhen</Stadt>
<Stadt>Dongguan</Stadt>
<Stadt>Shipai</Stadt>
</State>
<State id="6" name="Anhui">
<Stadt>Hefei</Stadt>
<Stadt>Huangshan</Stadt>
<Stadt>Kowloon Hill</Stadt>
<Stadt>Ma'anshan</Stadt>
</State>
</China>
CitySelect.htm
-Funktion: ChooseState
(Lesen Sie den Namen der Provinz in den XML-Daten und fügen Sie ihn zur Dropdown-Liste von SelState hinzu.)
functionChooseState()
{
Var-Quelle;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Eine MSXML-Parser-Instanz erstellen
source.async = false;
source.load(sourceName); //XML-Dokument laden
root = source.documentElement; //Legen Sie das Dokumentelement als Wurzelknotenelement fest
sortField=root.selectNodes(" //@name "); //Suche nach allen Knoten, deren Attribute name enthalten
for(var i=0;i<sortField.length;++i) //Provinznamen zur Dropdown-Liste hinzufügen
{
var oOption = document.createElement('OPTION');
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 der Dropdown-Liste „SelCity“ hinzu.)
functionChooseCity()
{
x=form1.SelState.selectedIndex; //Lesen Sie die aktuellen Optionen des Provinz-Dropdown-Felds
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Suche nach allen Stadtknoten unter dem State-Knoten, deren Namensattributwert gleich dem Parameter y ist
for(var i=form1.SelCity.options.length-1;i>=0;--i) //Das ursprüngliche Listenelement rückgängig machen
{
form1.SelCity.options.remove(i)
}
for(var i=0;i<sortField.length;++i) //Stadtnamen zur Dropdown-Liste hinzufügen
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
Formularquellcode
<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>
Nachtrag:
Als ich anfing, XML zu lernen, hatte ich die gleiche Verwirrung wie alle anderen: „Ich habe XML gelernt, aber wie soll ich es verwenden?“ Diese Frage hat mich lange, lange Zeit behindert ...
Wegen E-Commerce Da Softwareentwicklung und Softwareentwicklung zu meinen Fachgebieten gehören, dachte ich, dass es besser wäre, mit dem anzufangen, womit ich mich am besten auskenne. Deshalb habe ich einige der am häufigsten verwendeten Funktionen beim Website-Aufbau in XML implementiert. Du schaffst es auch!