Home > Developer > Web Develop
Compatible with IE, Firefox, Google, 360, and Google 360
Note: Google Browsers Do Not Allow loading local xml files, so they must be placed on the server to see the effect.
<! Doctype html>
<Html> // The xml dom Implementation of IE differs from that of firefox. function xmlDom () {var xmldom; if (window. activeXObject) {// xml document Object xmldom = createXmlDomIE ();} else if (document. implementation & document. implementation. createDocument) {// createDocument (); the first is the namespace. The second parameter and the third parameter of the tag name are doc-type xmldom = document. implementation. createDocument ("", "", null);} else {throw new Error ("your browser does not support xml dom");} return xmldom;} window. onload = function () {var xmldom; if (window. DOMP Arser &&! Window. activeXObject) {// if it is a Google browser and is not an IE browser var xmlhttp = new XMLHttpRequest (); xmlhttp. open ("GET", "city. xml ", false); xmlhttp. send (null); if (xmlhttp. readyState = 4) {xmldom = xmlhttp.responseXML.doc umentElement;} else {xmldom = xmlDom (); xmldom. async = false; xmldom. load ("city. xml "); // load the xml file} var sheng = document. getElementById ("sheng"); var shi = document. getElementById ("shi"); var xian = document. getElementById ("xian"); // obtain all provinces var shengs = xmldom. getElementsByTagName ("province"); // Add all provinces to the provincial drop-down list for (var I = 0; I <shengs. length; I ++) {addOption (shengs [I], sheng);} var cities; // judge a change event sheng in the sheng drop-down list. onchange = function () {var flag = 0; // obtain the index var index = sheng. options. selectedIndex; shi. length = 0; // clear the city xian. length = 0; // clear county cities = shengs [index]. childNodes; // obtain all selected cities for (var j = 0; j <cities. length; j ++) {if (cities [j]. nodeType = 1) {// determine whether the current node is an element node addOption (cities [j], shi ); // select if (flag = 0) {var areas = cities [j] from the drop-down list of the cities added by the current city. childNodes; // obtain all counties in the first city for (var k = 0; k <areas. length; k ++) {addOption (areas [k], xian);} flag = 1 ;}}}// shi when the city changes. onchange = function () {xian. length = 0; // clear the county // obtain the codevar mycode = shi of the selected city. value; var shis = xmldom. getElementsByTagName ("city"); // retrieve all cities for (var I = 0; I <shis. length; I ++) {if (shis [I]. nodeType = 1) {// if it is an element node var youcode = shis [I]. getAttribute ("postcode"); // retrieves the codeif (mycode = youcode) of the current city) {// if the current code is the same as the code of the selected city var xians = shis [I]. childNodes; // obtain all the counties in the current city for (var j = 0; j <xians. length; j ++) {// cyclically add all counties if (xians [j]. nodeType = 1) {addOption (xians [j], xian) ;}}}}} function addOption (arrs, obj) {if (arrs. nodeType = 1) {var opt = document. createElement ("option"); opt. appendChild (document. createTextNode (arrs. getAttribute ("name"); opt. setAttribute ("value", arrs. getAttribute ("postcode"); obj. appendChild (opt );}}
</Script> <Body> <div> <select id = "sheng" style = "width: 160px; border: 1px solid # F93; "> </select> <select id =" shi "style =" width: 160px; border: 1px solid # F93; "> </select> <select id =" xian "style =" width: 160px; border: 1px solid # F93; "> </select> </div> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
