js读取xml文件 结合select的联动

最新推荐文章于 2021-10-05 19:33:37 发布
最新推荐文章于 2021-10-05 19:33:37 发布
阅读量115 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/1451372/blog/529447
版权

  1. 所用的XML文档结构（area.xml文件名)

    <?xml version="1.0" encoding="utf-8" ?>
    <country>
        <pro id="jsu" name="江苏">
            <city id="wuxi" name="无锡">
                <area id="xinqu" name="新区"></area>
            </city>
            <city id="nanjing" name="南京"></city>
        </pro>
        <pro id="anhui" name="安徽">
            <city id="hefei" name="合肥">
                <area id="xinqu" name="新区"></area>
            </city>
        </pro>
    </country>

  2. 页面的代码

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>联动</title>
        <style type="text/css">
            *{ padding:0;margin:0; }
            body{width:1200px;height:700px;}
        </style>
        <script type="text/javascript">
            function xmlHttp(){
                if(window.XMLHttpRequest){
                    return new XMLHttpRequest();
                }else if (window.ActiveXObject) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }else {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                }
            }

            function loadXML(){
                var xmlDoc = "";
                var xmlhttp = xmlHttp();
                xmlhttp.open("GET",'area.xml',false);
                xmlhttp.send(null);
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        xmlDoc = xmlhttp.responseXML.documentElement;
                    }
                }
                return xmlDoc
            }

            window.onload = function(){
                var doc = loadXML();
                var pro = document.querySelector("#pro");
                var city = document.querySelector("#city");
                var area = document.querySelector("#area");
                //获取所有省份
                var nodeList=doc.getElementsByTagName("pro");

                for(var i = 0; i < nodeList.length ; i++){
                    var node = nodeList[i];
                    var option = document.createElement('option');
                    var txt = document.createTextNode(node.getAttribute("name"));
                    option.appendChild(txt);
                    //option.nodeValue =  node.getAttribute("name");
                    option.id =  node.id;
                    //getAttribute返回元素节点的指定属性值
                    //getAttributeNode返回指定的属性节点
                    pro.appendChild(option);
                }
                var nodeListCity = null;
                //给省添加change事件
                pro.addEventListener('change',function(e){
                    if(city.options.length >= 2){
                        clear(city);
                    }
                    var index = this.selectedIndex;
                    var id = this.options[index].id;
                    //this.options[index].value;
                    for(var i =0 ; i < nodeList.length ; i++){
                        if(id == nodeList[i].id){
                            nodeListCity = nodeList[i].querySelectorAll("city");
                            break;
                        }
                    }
                    if(nodeListCity){
                        for(var i = 0 ; i < nodeListCity.length;i++){
                            var cy = nodeListCity[i];
                            var option = document.createElement("option");
                            var txt = document.createTextNode(cy.getAttribute("name"));
                            option.appendChild(txt);
                            option.id = cy.id;
                            city.appendChild(option);
                        }
                    }else{
                        //无数据的时候
                        var option = document.createElement("option");
                        var txt = document.createTextNode("no data");
                        option.appendChild(txt);
                        city.appendChild(option);
                    }
                },false);

                var nodeListArea = null;
                //给城市添加change事件
                city.addEventListener('change',function(){
                    if(area.options.length >= 2){
                        clear(area);
                    }
                    var index = this.selectedIndex;
                    var id = this.options[index].id;

                    for(var i =0 ; i < nodeListCity.length ; i++){
                        if(id == nodeListCity[i].id){
                            nodeListArea = nodeListCity[i].querySelectorAll("area");
                            break;
                        }
                    }

                    if(nodeListArea){
                        for(var i = 0 ; i < nodeListArea.length;i++){
                            var cy = nodeListArea[i];
                            var option = document.createElement("option");
                            var txt = document.createTextNode(cy.getAttribute("name"));
                            option.appendChild(txt);
                            option.id = cy.id;
                            area.appendChild(option);
                        }
                    }else{
                        //无数据的时候
                        var option = document.createElement("option");
                        var txt = document.createTextNode("no data");
                        option.appendChild(txt);
                        area.appendChild(option);
                    }

                },false);
            };
            //删除关联的子select的option
            function clear(obj){
                if(obj.nodeName.toLowerCase() === "select"){
                    var len = obj.options.length;
                    if(len == 1){
                        obj.options[0].selected = true;
                        return;
                    }
                    for(; 2 <= obj.options.length ;){
                        obj.remove(1);
                    }
                }
            }
        </script>
    </head>
    <body>
    <form>
        <select id='pro'>
            <option>省/市直辖市</option>
        </select>
        <select id='city'>
            <option>请选择</option>
        </select>
        <select id='area'>
            <option>请选择</option>
        </select>
    </form>
    </body>
    </html>

     

转载于:https://my.oschina.net/u/1451372/blog/529447

chuziguang1986
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery ajax xml 实现select联动
03-16
NULL 博文链接：https://yuan903-gmail-com.iteye.com/blog/424507
ajax实战篇---城市select联动----XML交互 ...
weixin_30708329的博客
05-28 88
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>城市联动效果</title> <meta http-equiv="pragma" content="no-cache">...
二级联动效果实现(在javascript中解析xml文件添加到html(select)中)
Mr-MHL
10-28 748
// 当窗体加载完毕，执行 window.onload=function(){ /** * 第一步：得到xml document对象 */ var xmlDoc = getXmlDocument(); /** * 第三步：xml中获取所有省的节点 */ provincesNode = xmlDoc.getElementsByTagName("province");
网上书籍地址
weil的专栏
06-28 1367
www.pcbookcn.com非常书城:http://www.mayia.com/downshu/bookcity/index.asp帝华咨讯:http://pcbook.godcn.net/download/default.asp?page=2&typeid=33&txtitle=海阔天空:http://download.lycos.com.cn/program/book/index.html
AJAX解析XML实例之下拉框省、市二级联动
12-12
这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值： jsp页面代码： 代码如下: <%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%> <% String path = request.getContextPath(); String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.ge
js读取xml四级联动实例。
07-18
总结来说，"js读取xml四级联动实例"是一个结合了JavaScript和XML技术的实践项目，涵盖了XML数据的获取与解析，以及基于这些数据的动态界面交互。这个实例对于提升开发者在Web开发中的数据处理和用户交互能力具有很高...
JS+XML 省份和城市之间的联动实现代码
10-29
然后，使用JavaScript读取XML文件并解析其内容。可以使用`XMLHttpRequest`对象来异步加载XML文件，并通过`DOMParser`解析XML文档。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'Provinces.xml...
JQuery 解析XML省 市 县 三级联动
10-10
在IT领域，尤其是在Web开发中，"JQuery 解析XML省市区县三级联动"是一个常见的需求，主要用于构建交互式的下拉菜单，使得用户在选择省份时，对应的市和县会根据所选省份动态加载。这样的功能可以提升用户体验，减少...
jquery解析xml并实现二级联动
04-24
XML文件通常包含元素、属性、文本内容等，可以被各种程序读取和解析。在jQuery中，我们可以使用`$.ajax()`或`$.get()`方法来加载XML文件，然后使用`$(xml).find()`来查询和提取数据。 以下是使用jQuery解析XML的...
js 读取 xml 的城市级联
03-19
本篇文章将详细介绍如何使用JavaScript读取XML文件，并实现城市级联的效果。 首先，我们需要理解XML文件的结构。XML文件通常包含元素、属性和文本节点，这些元素可以嵌套形成树状结构。例如，一个简单的城市级联XML...
新手必看
热门推荐
赵逸寒的专栏
12-16 3万+
第一章------关于找软件 常用类软件： 华军软件 http://www.newhua.com/ （根据物理位置自行选择速度快的镜像） 中国下载 http://download.com.cn/ （使用查找功能可找到大部份软件） 东丽在线 http://www.tjdl.net/so
javascript获取select值，树形随着select值的变化而变化
wyl1401672169的博客
09-24 5852
一、javascript获取select值 div部分： 设备类型： 'selected="selected"> 上级项目： labelValue="${fns:getConfigBypId(config.config_parentid).config_name}" title="项目" url="/a/cfg/config
xml 绑定 select
彭香香的专栏
03-29 3780
我想要完成的：点击页面上一个按钮后，从XML文件中取出值，绑定到页面上的一个下拉框。我遇到的问题：在firefox浏览器中一步步调试时，最后下拉框中会显示新绑定的值，但直接运行的话，点了按钮后页面没有反应。我的代码如下：(这里只试着取出XML文档中的一个值)     function initSelect(){  var xmlDoc=document.
js读取xml文件并引用到下拉选择选项
c4each的博客
09-07 830
表单经常用到下拉框，除了在option标签写死，从数据库动态载入，这里将选项写到xml文件内，并在js中读取到页面上。 首先xml文件随便来几个选项： &lt;sels&gt; &lt;!--支出类别--&gt; &lt;zclb&gt;食品&lt;/zclb&gt; &lt;zclb&gt;衣着&lt;/zclb&gt; &lt;zclb&gt;居住&amp
通过Http协议获取XML
linda的专栏
11-10 804
数据库 Myeclipse中
某鱼APP x-sign x-mini-wua x-sgext 分析成果
PANGHU1103的博客
10-05 2万+
def get_sign(Pm): #这里是加密需要的字段 arg0 = Pm['appKey'] arg1 = Pm['utdid'] + "&" arg1 = arg1 + Pm['uid']+ "&" arg1 = arg1 + Pm['reqbiz-ext']+ "&" arg1 = arg1 + Pm['appKey']+ "&" arg1 = arg1 + Pm['datamd5']+ "&" .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值