search
HomeBackend DevelopmentXML/RSS TutorialXML Practical Cheats Volume 4: Menu Linkage

XML Practical Cheats Volume 4: Menu Linkage

Mar 19, 2017 pm 03:45 PM
phpphp tutorialVideo tutorial

[Introduction] Now let's do a small example of applying xml in IE: solving the linkage problem of double drop-down menus. Perhaps the most common example is to select a province and then change the city options, so let's try to use XML to complete it. Some of the functions I introduced before were implemented directly using XML+XSL files.

Now let’s do a small example of applying xml in IE: solving the linkage problem of double drop-down menus. Perhaps the most common example is to select a province and then change the city options, so let's try to use XML to complete it.

I have implemented some of the functions introduced before directly using XML+XSL files. You may not be very familiar with its usage, so I will use HMTL+XML this time, hoping to make everyone more familiar with it. Clear understanding - "XML can be so simple!":)


Materials:
XML volume selection menu linkage
There are 2 files: Citys.xml and CitySelect.htm

Function:
After selecting a province, the corresponding city can be automatically displayed, which is convenient for users, effectively improves data interaction, and makes your page more colorful.
Effect:
Browse here
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

Custom function: ChooseState
(Read the name of the province in the XML data and add it to the SelState drop-down list)

function ChooseState()
{
  var source;
  var sourceName = "Citys.xml";
  var source = new ActiveXObject(&#39;Microsoft.XMLDOM&#39;);   //创建一个 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(&#39;OPTION&#39;);
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
     form1.SelState.options.add(oOption); 
  }
   ChooseCity();
}


Custom function: ChooseCity
(according to The currently selected province name is used to read the corresponding city name in the XML data and add it to the SelCity drop-down list)

function ChooseCity()
{
  x=form1.SelState.selectedIndex;   //读取省份下拉框的当前选项
  y=form1.SelState.options[x].value;
  sortField=root.selectNodes("//State[@name=&#39;"+y+"&#39;]/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(&#39;OPTION&#39;);
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
    form1.SelCity.options.add(oOption); 
  }
}




Form source code

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



Postscript:
When I first started learning XML, I had the same confusion as everyone else - "I have learned XML, but how should I use it?" What? "This question has been holding me back for a long, long time...

Because e-commerce and software development are my expertise, I thought it would be better to start with what I am most familiar with. So I implemented some of the most commonly used functions in website construction in XML. You can do it too!                    

The above is the detailed content of XML Practical Cheats Volume 4: Menu Linkage. For more information, please follow other related articles on the PHP Chinese website!

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
Understanding RSS Documents: A Comprehensive GuideUnderstanding 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 DiveRSS, 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 XMLBeyond 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 DevelopersDecoding 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 XMLJSON 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 ExplainedRSS: 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 AttributesInside 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.

JSON, XML, and Data Formats: Comparing RSSJSON, XML, and Data Formats: Comparing RSSMay 02, 2025 am 12:20 AM

The main differences between JSON, XML and RSS are structure and uses: 1. JSON is suitable for simple data exchange, with a simple structure and easy to parse; 2. XML is suitable for complex data structures, with a rigorous structure but complex parsing; 3. RSS is based on XML and is used for content release, standardized but limited use.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version