


Detaillierte Erläuterung des Javascript-Aufrufs von XML zum Erstellen verknüpfter Dropdown-Box-Codebeispiele
Zwei Methoden werden verwendet, um Dropdown-Felder in herkömmlichen HTML-Seiten zu verknüpfen:
1) Codieren Sie den Inhalt im Dropdown-Feld direkt fest in das JavaScript von HTML und rufen Sie die Javascript-Funktion auf, um ihn in das Drop-Down-Feld zu schreiben -Down-Box in einer Schleife. Diese Methode eignet sich nicht für Situationen, in denen sich der Inhalt des Dropdown-Felds häufig ändert. Weil die Datenquelle und das JavaScript-Programm auf derselben Seite geschrieben sind.
<html> <head> <title>List</title> <meta http-equiv="Content-Type" content="text/html; c harset=gb2312"> <script LANGUAGE="javascript"> <!-- var onecount; onecount=0; subcat = new Array(); subcat[0] = new Array("徐汇区","01","001"); subcat[1] = new Array("嘉定区","01","002"); subcat[2] = new Array("黄浦区","01","003"); subcat[3] = new Array("南昌市","02","004"); subcat[4] = new Array("九江市","02","005"); subcat[5] = new Array("上饶市","02","006"); onecount=6; function changelocation(locationid) { document.myform.smalllocation.length = 0; var locationid=locationid; var i; document.myform.smalllocation.options[0] = new Option('====所有地区====',''); for (i=0;i <onecount; i++) { if (subcat[i][1] == locationid) { document.myform.smalllocation.options[document.myform.smalllocation.length] = new Option(subcat[i][0], subcat[i][2]); } } } //--> </script> </head> <body> <form name="myform" method="post"> <select name="biglocation" onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)"> <option value="01" selected>上海</option> <option value="02">江西</option> </select> <select name="smalllocation"> <option selected value="">==所有地区==</option> </select> </form> <script LANGUAGE="javascript"> <!-- changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value); //--> </script> </body> </html>
2) JavaScript liest die Datenbank direkt, nimmt die Datensätze in der Datenbank und schreibt sie in JavaScript und ruft dann, wie bei der ersten Methode, die JavaScript-Funktion auf, um in das Dropdown-Feld zu schreiben eine Schleife. Diese Methode trennt die Datenquelle von JavaScript, die Offenlegung der Datenbankverbindung hat jedoch aus Sicherheitsgründen kaum einen praktischen Nutzen.
Meine Methode besteht darin, die Daten im Dropdown-Feld in einer XML-Datei abzulegen, Javascript zum Lesen der XML-Datei zu verwenden und den Inhalt im Dropdown-Feld abzurufen.
Die HTML-Datei lautet wie folgt:
<!-- myfile.html --> <html> <head> <script language="JavaScript" for="window" event="onload"> var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); var i=0; var j=0; var subclass_name=""; loadXML(); function loadXML(){ xmlDoc.async="false"; xmlDoc.load("account.xml"); xmlObj=xmlDoc.documentElement; nodes = xmlDoc.documentElement.childNodes; document.frm.mainclass.options.length = 0; document.frm.subclass.options.length = 0; for (i=0;i<xmlObj.childNodes.length;i++){ labels=xmlObj.childNodes(i).getAttribute("display_name"); values=xmlObj.childNodes(i).text; document.frm.mainclass.add(document.createElement("OPTION")); document.frm.mainclass.options[i].text=labels; document.frm.mainclass.options[i].value=values; } } </script> <script language="JavaScript" > var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); var i=0; var j=0; function deleteOption() { } function setsubclass(main){ var is_selected="N"; if (document.frm.subclass.options.length!=0) { for (i=0;i<=document.frm.subclass.options.length;i++) document.frm.subclass.options[i]=null ; } //重复才有效 if (document.frm.subclass.options.length!=0) { for (i=0;i<=document.frm.subclass.options.length;i++){ document.frm.subclass.options[i]=null ; document.frm.subclass.options.remove(i); } } for (i=0;i<xmlObj.childNodes.length;i++){ var values=""; var lables=""; if (is_selected=="Y") return; labels=xmlObj.childNodes(i).getAttribute("display_name"); values=xmlObj.childNodes(i).text; //alert(labels+ " | "+main); if (labels==main){ is_selected="Y"; for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){ //subclass_name="document.frm.subclass"; labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name"); values=xmlObj.childNodes(i).childNodes(j).text; //alert(values); document.frm.subclass.add(document.createElement("OPTION")); document.frm.subclass.options[j].text=labels; document.frm.subclass.options[j].value=values; } } } } </script> <title>在HTML中调用XML数据</title> </head> <body bgcolor="#FFFFFF"> <FORM NAME="frm"> 类型<SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT> <option selected value="" ></option> 子类<SELECT NAME="subclass"></SELECT> </form> </body> </html> account.xml 如下: <?xml version="1.0" encoding="GB2312"?> <item> <class display_name="未选定"> <subclass display_name="">Not Available</subclass> </class> <class display_name="95788主叫卡"> <subclass display_name="1152069589-1152069638">dangdang1</subclass> <subclass display_name="1152081031-1152081080">dangdang2</subclass> <subclass display_name="1152547201-1105254750">dangdang3</subclass> <subclass display_name="1152548401-1152548700">dangdang4</subclass> <subclass display_name="1152548701-1152549000">dangdang5</subclass> <subclass display_name="1156000001-1156010000">dangdang6</subclass> </class> <class display_name="网上注册"> <subclass display_name="1152000001-1152001000">zhuce_user1</subclass> <subclass display_name="1151001000-1151005000">zhuce_user2</subclass> </class> <class display_name="通讯"> <subclass display_name="1156030001-1156080000">tongxun</subclass> </class> </item>
Diese Methode trennt die Datenquelle vom Javascript-Programm und eignet sich für häufig wechselnde Datenquellen. In xmlDoc.load können Sie URL-Parameter direkt aufrufen und Remote-XML lesen, um eine lose Kopplung zu erreichen. Die obige Anwendung läuft in IE6.0. Der Nachteil besteht darin, dass Sie beim Entfernen des Inhalts der Dropdown-Liste den Löschvorgang
wiederholen müssen, da sonst offensichtliche Fehler auftreten. Ich hoffe, einige Leser können mich korrigieren.
Das Obige ist die detaillierte Erklärung des Javascript-Aufrufs von XML, um ein Beispiel für einen verknüpften Dropdown-Box-Code zu erstellen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen











Können XML-Dateien mit PPT geöffnet werden? XML, Extensible Markup Language (Extensible Markup Language), ist eine universelle Auszeichnungssprache, die häufig im Datenaustausch und in der Datenspeicherung verwendet wird. Im Vergleich zu HTML ist XML flexibler und kann eigene Tags und Datenstrukturen definieren, wodurch die Speicherung und der Austausch von Daten komfortabler und einheitlicher werden. PPT oder PowerPoint ist eine von Microsoft entwickelte Software zum Erstellen von Präsentationen. Es bietet eine umfassende Möglichkeit

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

Verwenden Sie PHPXML-Funktionen, um XML-Daten zu verarbeiten: XML-Daten analysieren: simplexml_load_file() und simplexml_load_string() laden XML-Dateien oder Strings. Auf XML-Daten zugreifen: Verwenden Sie die Eigenschaften und Methoden des SimpleXML-Objekts, um Elementnamen, Attributwerte und Unterelemente abzurufen. XML-Daten ändern: Fügen Sie neue Elemente und Attribute mit den Methoden addChild() und addAttribute() hinzu. Serialisierte XML-Daten: Die Methode asXML() konvertiert ein SimpleXML-Objekt in einen XML-String. Praxisbeispiel: Produkt-Feed-XML analysieren, Produktinformationen extrahieren, umwandeln und in einer Datenbank speichern.

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

Einführung XML (Extensible Markup Language) ist ein beliebtes Format zum Speichern und Übertragen von Daten. Das Parsen von XML in Java ist für viele Anwendungen eine notwendige Aufgabe, vom Datenaustausch bis zur Dokumentenverarbeitung. Um XML effizient zu analysieren, können Entwickler verschiedene Java-Bibliotheken verwenden. In diesem Artikel werden einige der beliebtesten XML-Parsing-Bibliotheken verglichen und der Schwerpunkt auf deren Features, Funktionalität und Leistung gelegt, um Entwicklern eine fundierte Entscheidung zu erleichtern. DOM-Parsing-Bibliothek (Document Object Model) JavaXMLDOMAPI: eine von Oracle bereitgestellte Standard-DOM-Implementierung. Es stellt ein Objektmodell bereit, mit dem Entwickler auf XML-Dokumente zugreifen und diese bearbeiten können. DocumentBuilderFactoryfactory=D
