Jquery, Ajax, xml realize three-level linkage menu effect
This article mainly brings you an article about Jquery+Ajax+xml to achieve the effect of selecting a three-level linkage menu in China (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
This article mainly introduces the use of Jquery+Ajax+xml. First, you need an xml document containing all map information in our country.
The main structure of the xml document selected here (more than 1,000 lines in total) is as follows:
<?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" provinceID="110000" province="北京市"> <City CityID="110100" City="市辖区"> <Piecearea PieceareaID="110101" Piecearea="东城区" /> <Piecearea PieceareaID="110102" Piecearea="西城区" /> <Piecearea PieceareaID="110103" Piecearea="崇文区" /> <Piecearea PieceareaID="110104" Piecearea="宣武区" /> <Piecearea PieceareaID="110105" Piecearea="朝阳区" /> <Piecearea PieceareaID="110106" Piecearea="丰台区" /> <Piecearea PieceareaID="110107" Piecearea="石景山区" /> <Piecearea PieceareaID="110108" Piecearea="海淀区" /> <Piecearea PieceareaID="110109" Piecearea="门头沟区" /> <Piecearea PieceareaID="110111" Piecearea="房山区" /> <Piecearea PieceareaID="110112" Piecearea="通州区" /> <Piecearea PieceareaID="110113" Piecearea="顺义区" /> <Piecearea PieceareaID="110114" Piecearea="昌平区" /> <Piecearea PieceareaID="110115" Piecearea="大兴区" /> <Piecearea PieceareaID="110116" Piecearea="怀柔区" /> <Piecearea PieceareaID="110117" Piecearea="平谷区" /> </City> <province>
Make the corresponding form and select the province/city action according to the settings:
<h2>地区三级联动菜单</h2> 省:<select id="province" onchange="showcity()"><option value="0">-请选择-</option></select> 市:<select id="city" onchange="showdistrict()"><option value="0">-请选择-</option></select> 地区:<select id="district"><option value="0">-请选择-</option></select>
The following is the JS code line
//声明一个全局变量,用于存储第一次请求的xml信息,避免后续多次频繁请求xml var xmldom =null; //获取并显示省份信息 function showprovince(){ //使用ajax去服务器获得xml文件里面的省份信息 $.ajax({ url:'./ChinaArea.xml', //data: dataType:'xml',//相当于调用responseXML type:'get', success:function(msg){ //将返回的xml信息赋予xmldom xmldom = msg; //获得province 元素节点对象 var prov = $(msg).find('province'); //遍历省份信息 prov.each(function(k,v){ var nm = $(this).attr('province'); var id = $(this).attr('provinceID'); //追加到指定的节点 $('#province').append("<option value="+id+">"+nm+"</option>"); }); } }); } //网页加载显示省份信息 $(function(){ showprovince(); }); function showcity(){ //获取 省份 的id var pid = $('#province option:selected').val(); //根据xmldom信息 找到指定的省份节点 var xml_province = $(xmldom).find('province[provinceID='+pid+']'); // 获取对应所有县市节点 var city = $(xml_province).find('City'); //在遍历追加前,先清空此前已经显示的信息 $('#city').empty(); $('#city').append('<option value="0">-请选择-</option>'); //遍历追加县市 city.each(function(k,v){ var nm = $(this).attr('City'); var id = $(this).attr('CityID'); $('#city').append('<option value='+id+'>'+nm+'</option>'); }); } //以下函数的逻辑与showcity()的逻辑一致 function showdistrict(){ //获取 县市 的id var cid = $('#city option:selected').val(); //根据xmldom信息 找到指定的县市节点 var xml_city = $(xmldom).find('City[CityID='+cid+']'); // 获取对应所有地区节点 var district = $(xml_city).find('Piecearea'); $('#district').empty(); $('#district').append('<option value="0">-请选择-</option>'); district.each(function(k,v){ var nm = $(this).attr('Piecearea'); var id = $(this).attr('PieceareaID'); $('#district').append('<option value='+id+'>'+nm+'</option>'); }); }
related recommendations:
How to implement ajax three-level linkage
It is simple to achieve the effect of ajax three-level linkage Method
The above is the detailed content of Jquery, Ajax, xml realize three-level linkage menu effect. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Journey through the vastness and set foot on the journey to the west! Today, Zhengtu IP officially announced that it will launch a cross-border cooperation with CCTV animation "Journey to the West" to jointly create a cultural feast that combines tradition and innovation! This cooperation not only marks the in-depth cooperation between the two major domestic classic brands, but also demonstrates the unremitting efforts and persistence of the Zhengtu series on the road of promoting Chinese traditional culture. Since its birth, the Zhengtu series has been loved by players for its profound cultural heritage and diversified gameplay. In terms of cultural inheritance, the Zhengtu series has always maintained respect and love for traditional Chinese culture, and skillfully integrated traditional cultural elements into the game, bringing more fun and inspiration to players. The CCTV animation "Journey to the West" is a classic that has accompanied the growth of generations.

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

On the date, "Backwater Cold" officially announced that it will launch a linkage with KFC from April 19th to May 12th. However, the specific content of the linkage has left many people stunned. They repeatedly said, "It's embarrassing to heaven" and "It's important to society." died"! The reason lies in the slogan of this theme event. Friends who have seen the KFC linkage of "Genshin Impact" and "Beng Tie" must have the impression that "encountering another world and enjoying delicious food" has become a reality in "Ni Shui Han" Now: shout out to the clerk, "God is investigating the case, who are you?" The clerk needs to reply, "Fried chicken is a big business, and there is no room for error!" Training guide for employees: Never laugh! Not only that, this collaboration also held a dance competition. If you go to the theme store and perform the "Dance when you hear 'Ji'" dance move, you can also get a small rocking music stand. Embarrassing, so embarrassing! But that's what I want

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Classic reunion, reversing time and space. The "Dragon 2" mobile game and the classic movie "Westward Journey" are jointly scheduled to be released on April 11! It coincides with the anniversary celebration of the "Dragon 2" mobile game. We invite everyone to relive the classic memories and once again witness the battle between Zhizunbao and Zixia until death. The legendary story of Chongqing. There must be colorful auspicious clouds, and there must be golden armor and holy clothes. When the phrase "Prajna Paramita" echoes in your ears, will you think of the tear that Zixia left in the heart of the Supreme Treasure? A glance for ten thousand years, but it is impossible to escape the fate of fate. Even if there is no return, my love will never change until death. The Westward Journey collaboration appearance [One Eye for Ten Thousand Years] and [God's Will] will be launched simultaneously with the anniversary version. I hope you can wear the golden armor or meet your own unparalleled hero, and return to your most passionate youth. Five hundred years of protection, true love till death, said by chance when I met Luoyang that day
