有javascrip兑现的选项级联
有javascrip实现的选项级联
用js写的选择省后,该省的所有城市全都显示出来。
第1步、建xml文件,用xml存放省和城市的信息
第2步、建立html文件
ShowProvince.html
所有的浏览器都支持!!
欢迎访问:http://student.****.net/space.php?uid=480051,这里有我的更多原创!!
用js写的选择省后,该省的所有城市全都显示出来。
第1步、建xml文件,用xml存放省和城市的信息
Province.xml <?xml version="1.0" encoding="UTF-8"?> <provinces> <province name="河北"> <city>邢台</city> <city>廊坊</city> <city>石家庄</city> <city>衡水</city> <city>保定</city> <city>新乐</city> </province> <province name="河南"> <city>开封</city> <city>洛阳</city> <city>商丘</city> <city>安阳</city> <city>郑州</city> <city>平顶山</city> </province> <province name="北京"> <city>上地</city> <city>朝阳</city> <city>公主坟</city> <city>海淀</city> <city>大兴</city> <city>东城</city> </province> </provinces>
第2步、建立html文件
ShowProvince.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ShowProvince.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h1>省的级联实现</h1> <span> <select id="provinces"> <option>请选择省份</option> </select> <select id="cities"> <option>请选择城市</option> </select> </span> </body> </html> <script> window.onload=function (){ //加载xml文件 var xmlDom; try{ //Microsoft加载方法 xmlDom=new ActiveXObject("Microsoft.XMLDOM"); }catch(exception){ try{ //其他的浏览器的加载方法 xmlDom=document.implementation.createDocument("", "", null); }catch(e){ } } //关闭异步加载 xmlDom.async = "false"; //加载***.xml xmlDom.load("Province.xml"); //获得根节点 alert(root+"==="); var root = xmlDom.documentElement; alert(root.nodeName); //获得根节点中的所有元素 var provinces= root.getElementsByTagName("province"); //获得html中的省object var pro=document.getElementById("provinces"); //遍历所有的结点 for(var i=0;i<provinces.length;i++){ //获得xml中所有的province的标签中的name属性,这些属性将要写的html中去 var province =provinces[i].getAttribute("name"); //创建一个Element放到pro中 var opt=document.createElement("option"); //向文本中添加内容 opt.appendChild(document.createTextNode(province)); //向pro中添加 pro.appendChild(opt); } //获得city var cities = document.getElementById("cities"); //省改变时 var opts=pro.options; pro.onchange = function() { // pce = document.getElementById("provinces"); //var opts = pce.options; var opt1 = opts[pro.selectedIndex]; var name = opt1.innerHTML; for ( var i = 0; i < provinces.length; i++) { //获取省节点的name属性的值 var name1 = provinces[i].getAttribute("name"); if (name == name1) { cities.length=1;//每次改变的时候清空 var pros =provinces[i]; var citys = pros.getElementsByTagName("city"); for ( var j = 0; j < citys.length; j++) { //创建一个option var opt1 = document.createElement("option"); //为option添加文本 opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue)); //添加到父节点中 cities.appendChild(opt1); } } } } } </script>
所有的浏览器都支持!!
欢迎访问:http://student.****.net/space.php?uid=480051,这里有我的更多原创!!