Heim Backend-Entwicklung XML/RSS-Tutorial Detaillierte Erläuterung des Javascript-Aufrufs von XML zum Erstellen verknüpfter Dropdown-Box-Codebeispiele

Detaillierte Erläuterung des Javascript-Aufrufs von XML zum Erstellen verknüpfter Dropdown-Box-Codebeispiele

Mar 07, 2017 pm 04:29 PM

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(&#39;====所有地区====&#39;,&#39;&#39;);
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>
Nach dem Login kopieren

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=&#39;setsubclass(this[selectedIndex].text)&#39;></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>
Nach dem Login kopieren

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


Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heißer Artikel

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusionssystem, erklärt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Flüstern des Hexenbaum
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1666
14
PHP-Tutorial
1273
29
C#-Tutorial
1254
24
Kann ich eine XML-Datei mit PowerPoint öffnen? Kann ich eine XML-Datei mit PowerPoint öffnen? Feb 19, 2024 pm 09:06 PM

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 Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

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 JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

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

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

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

Wie verwende ich PHP-Funktionen zur Verarbeitung von XML-Daten? Wie verwende ich PHP-Funktionen zur Verarbeitung von XML-Daten? May 05, 2024 am 09:15 AM

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.

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

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

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

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

Vergleich von Java-Bibliotheken für das XML-Parsing: Die beste Lösung finden Vergleich von Java-Bibliotheken für das XML-Parsing: Die beste Lösung finden Mar 09, 2024 am 09:10 AM

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

See all articles