Motivation:
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
(XML-Daten lesen Der Name von die Provinz und zur Dropdown-Liste von SelState hinzugefügt)
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();
}Benutzerdefinierte Funktion: ChooseCity
(XML-Daten basierend auf dem aktuell ausgewählten Provinznamen lesen Der entsprechende Stadtname in und zur Dropdown-Liste von SelCity hinzugefügt)
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);
}
}
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?“
Da E-Commerce und Softwareentwicklung meine Fachgebiete sind, dachte ich, es wäre besser, mit dem zu beginnen, 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!
Das Obige sind die praktischen Tipps für XML-Volumen (4): Menüverknüpfungsinhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
