Detailed explanation of Javascript calling XML to create linked drop-down box code examples-XML/RSS Tutorial-php.cn

Home

Backend Development

XML/RSS Tutorial

Detailed explanation of Javascript calling XML to create linked drop-down box code examples

黄舟

Mar 07, 2017 pm 04:29 PM

Two methods are used to link drop-down boxes in traditional HTML pages:
1) Directly hardcode the content in the drop-down box into the javascript of html, and call the Javascript function to write it into the drop-down box in a loop. This method is not suitable for situations where the contents of the drop-down box change frequently. Because the data source and JavaScript program are written on the same page.

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

2) JavaScript reads the database directly, takes the records in the database and writes them into JavaScript, and then, like the first method, calls the JavaScript function to write to the drop-down box in a loop. This method separates the data source from JavaScript, but exposing the database connection has little practical value from a security perspective.

My method is to put the data in the drop-down box in an xml file, use javascript to read the XML file, and obtain the content in the drop-down box.

The HTML file is as follows:

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

This method separates the data source from the javascript program and is suitable for frequently changing data sources. In xmlDoc.load, you can directly call URL parameters and read remote XML to achieve loose coupling. The above application passes in IE6.0. The disadvantage is that when removing the contents of the drop-down box list, you need to
repeat the deletion operation, otherwise there will be obvious bugs. I hope some readers can correct me.

The above is the detailed explanation of Javascript calling XML to create a linked drop-down box code example. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Anatomy of an RSS Document: Structure and ElementsMay 10, 2025 am 12:23 AM

The structure of an RSS document includes three main elements: 1.: root element, defining the RSS version; 2.: Containing channel information, such as title, link, and description; 3.: Representing specific content entries, including title, link, description, etc.

Understanding RSS Documents: A Comprehensive GuideMay 09, 2025 am 12:15 AM

RSS documents are a simple subscription mechanism to publish content updates through XML files. 1. The RSS document structure consists of and elements and contains multiple elements. 2. Use RSS readers to subscribe to the channel and extract information by parsing XML. 3. Advanced usage includes filtering and sorting using the feedparser library. 4. Common errors include XML parsing and encoding issues. XML format and encoding need to be verified during debugging. 5. Performance optimization suggestions include cache RSS documents and asynchronous parsing.

RSS, XML and the Modern Web: A Content Syndication Deep DiveMay 08, 2025 am 12:14 AM

RSS and XML are still important in the modern web. 1.RSS is used to publish and distribute content, and users can subscribe and get updates through the RSS reader. 2. XML is a markup language and supports data storage and exchange, and RSS files are based on XML.

Beyond Basics: Advanced RSS Features Enabled by XMLMay 07, 2025 am 12:12 AM

RSS enables multimedia content embedding, conditional subscription, and performance and security optimization. 1) Embed multimedia content such as audio and video through tags. 2) Use XML namespace to implement conditional subscriptions, allowing subscribers to filter content based on specific conditions. 3) Optimize the performance and security of RSSFeed through CDATA section and XMLSchema to ensure stability and compliance with standards.

Decoding RSS: An XML Primer for Web DevelopersMay 06, 2025 am 12:05 AM

RSS is an XML-based format used to publish frequently updated data. As a web developer, understanding RSS can improve content aggregation and automation update capabilities. By learning RSS structure, parsing and generation methods, you will be able to handle RSSfeeds confidently and optimize your web development skills.

JSON vs. XML: Why RSS Chose XMLMay 05, 2025 am 12:01 AM

RSS chose XML instead of JSON because: 1) XML's structure and verification capabilities are better than JSON, which is suitable for the needs of RSS complex data structures; 2) XML was supported extensively at that time; 3) Early versions of RSS were based on XML and have become a standard.

RSS: The XML-Based Format ExplainedMay 04, 2025 am 12:05 AM

RSS is an XML-based format used to subscribe and read frequently updated content. Its working principle includes two parts: generation and consumption, and using an RSS reader can efficiently obtain information.

Inside the RSS Document: Essential XML Tags and AttributesMay 03, 2025 am 12:12 AM

The core structure of RSS documents includes XML tags and attributes. The specific parsing and generation steps are as follows: 1. Read XML files, process and tags. 2. Extract,,, etc. tag information. 3. Handle custom tags and attributes to ensure version compatibility. 4. Use cache and asynchronous processing to optimize performance to ensure code readability.

See all articles