大家过年好， 这里给大家拜个年了， 呵呵， 高手帮我看看javaScript解些xml问题， 变成关联下拉列表

好简单啦，构建一个xmldom对象，
然后用xpath就搞定了

解决方案 »

  1.   

    manyroads大侠， 能不能别光说， 代码贴上来让兄弟看看撒～～～firefox也要支持的。
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <textarea ID="xmlstore" style="display:none">
    <?xml version="1.0" encoding="gb2312"?>
    <lang>
    <from>
    <name>Chinese</name>
    <to>
    <name>English</name>
    <dict>
    <id>123</id>
    <bname>汉英词典</bname>
    </dict>
    <dict>
    <id>231</id>
    <bname>计算机辞典</bname>
    </dict>
    <dict>
    <id>2312</id>
    <bname>简明汉英词典</bname>
    </dict>
    </to>
    <to>
    <name>Japen</name>
    <dict>
    <id>342</id>
    <bname>简明汉日词典</bname>
    </dict>
    </to>
    </from>
    <from>
    <name>Spanish</name>
    <to>
    <name>English</name>
    <dict>
    <id>23</id>
    <bname>西班牙英语互译辞典</bname>
    </dict>
    </to>
    </from>
    </lang>
    </textarea>
    select1:<select id="select1" onchange="changefrom(this.value);"></select>
    <br>
    select2:<select id="select2" onchange="changeto(this.value)"></select>
    </body>
    </html>
    <script language="javascript">
    var xmldoc = XmlDoc();//创建xmldocfunction window.onload()
    {
    createlist(document.getElementById("xmlstore").value);//加载xml
    }function createlist(xml)
    {
    xmldoc.loadXML(xml); //加载xml
    var list1 = document.getElementById("select1"); //获取下拉菜单1
    var nodes = xmldoc.documentElement.selectNodes("//from"); //获取全部form节点
    for(var i=0;i<nodes.length;i++) //遍历
    {
    node = nodes[i].selectNodes("name[0]"); //form节点下的 name节点
    //增加一个下拉菜单选项
    if(node.length>0)
    {
    var oOption = document.createElement("option");
    oOption.innerText = node[0].text;
    oOption.value = i;
    list1.appendChild(oOption);
    }
    }
    changefrom("0");//触发方法
    }//方法 改变下拉菜单1 时触发
    function changefrom(value)
    {
    var list2 = document.getElementById("select2"); //获取下拉菜单2
    list2.length = 0; //清空下拉菜单2 
    var nodes = xmldoc.documentElement.selectNodes("//from["+value+"]/to"); //获取相应的 to节点
    for(var i=0;i<nodes.length;i++)//遍历
    {
    node = nodes[i].selectNodes("name[0]"); //获取 to节点的name 节点
    //增加一个选项
    if(node.length>0)
    {
    var oOption = document.createElement("option");
    oOption.innerText = node[0].text;
    oOption.value = value+","+i;
    list2.appendChild(oOption);
    }
    }
    changeto(value+",0"); //触发方法
    }// 方法 改变下拉菜单2 时触发
    function changeto(value)
    {
    var temparr = value.split(","); //分解参数
    var nodes = xmldoc.documentElement.selectNodes("//from["+temparr[0]+"]/to["+temparr[1]+"]/dict"); //获取相应dict节点
    var tempstr = ""; //创建临时数据
    for(var i=0;i<nodes.length;i++) //遍历
    {
    tempstr += nodes[i].selectNodes("id")[0].text + " : " + nodes[i].selectNodes("bname")[0].text + "\n"; //....不说了
    }
    alert(tempstr); //输出
    }//创建xmldom的方法
    function XmlDoc()
    {
    xmldoc = null;
    try{xmldoc = new ActiveXObject("Microsoft.XMLDOM");}catch(e){}
    try{if(xmldoc==null)xmldoc = new ActiveXObject("Msxml2.DOMDocument");}catch(e){}
    return xmldoc;
    }</script>
      

  3.   

    gzdiablo() 大哥， 我们做的东西都在firefox底下浏览， 你的代码我在ie底下跑起来了， 能不能帮我
    改成firefox的？？万分感谢～～～～
      

  4.   

    FF不是不支持XMLDOM只是实现方式不同
      

  5.   

    rob123 ， 你能不能帮我改成friefox可以运行起来的？谢谢了
      

  6.   

    Opera貌似比FF恐怖许多的说。。
      

  7.   

    简单测试了一下好象没什么问题,先发上来给你。为了方便用到了prototype.js和zXml.js,网上到处都是自己去下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="zxml.js"></script>
    <script type="text/javascript">var xmlString = "<lang>"
    + "<from>"
    + "<name>Chinese</name>"
    + "<to>"
    + "<name>English</name>"
    + "<dict>"
    + "<id>123</id>"
    + "<bname>汉英词典</bname>"
    + "</dict>"
    + "<dict>"
    + "<id>231</id>"
    + "<bname>计算机辞典</bname>"
    + "</dict>"
    + "<dict>"
    + "<id>2312</id>"
    + "<bname>简明汉英词典</bname>"
    + "</dict>"
    + "</to>"
    + "<to>"
    + "<name>Japen</name>"
    + "<dict>"
    + "<id>342</id>"
    + "<bname>简明汉日词典</bname>"
    + "</dict>"
    + "</to>"
    + "</from>"
    + "<from>"
    + "<name>Spanish</name>"
    + "<to>"
    + "<name>English</name>"
    + "<dict>"
    + "<id>23</id>"
    + "<bname>西班牙英语互译辞典</bname>"
    + "</dict>"
    + "</to>"
    + "</from>"
    + "</lang>";

    var Selector = {
    init:function(xmlString,sp,sc){
    this.xmlDom = zXmlDom.createDocument();
    this.xmlDom.loadXML(xmlString);
    this.parentSelector = $(sp);
    this.childSelector = $(sc);
    this.parentSelector.onchange = this.fillChild.bind(this);
    this.childSelector.onchange = this.output.bind(this);
    this.fillParent();
    },
    fillParent:function(){
    var _self = this;
    this.parentSelector.options.length = 0;
    this.parentSelector.options[0] = new Option("请选择","-1");
    var items = this.xmlDom.documentElement.childNodes;
    var itemNum = items.length;
    itemNum.times(function(i){
    var text = items[i].childNodes[0].text;
    _self.parentSelector.options[_self.parentSelector.options.length] = new Option(text,i);
    });
    },
    fillChild:function(){
    var _self = this;
    this.childSelector.options.length = 0;
    this.childSelector.options[0] = new Option("请选择","-1");
    var index = this.parentSelector.options[this.parentSelector.selectedIndex].value;
    var currentItem = this.xmlDom.documentElement.childNodes[index];
    currentItem.childNodes.length.times(function(i){
    if(currentItem.childNodes[i].tagName != "to")return;
    var text = currentItem.childNodes[i].childNodes[0].text;
    _self.childSelector.options[_self.childSelector.options.length] = new Option(text,i);
    });
    },
    output:function(){
    var currentItem = this.xmlDom.documentElement.childNodes[this.parentSelector.options[this.parentSelector.selectedIndex].value].childNodes[this.childSelector.options[this.childSelector.selectedIndex].value];
    currentItem.childNodes.length.times(function(i){
    if(currentItem.childNodes[i].tagName != "dict")return;
    currentItem.childNodes[i].childNodes.length.times(function(j){
    document.body.innerHTML += "<br/>"
    + currentItem.childNodes[i].childNodes[j].tagName + ":"
    + currentItem.childNodes[i].childNodes[j].text
    + "<br/>"
    });
    });
    }
    }window.onload = function(){
    Selector.init(xmlString,$("s1"),$("s2"));
    }
    </script>
    </head><body>
    <select name="s1" id="s1">
    </select>
    <select name="s2" id="s2">
    </select>
    </body>
    </html>
      

  8.   

    rob123()  谢谢， 十分感谢阿。  你是一个好人。 
    gzdiablo() 谢谢， 十分感谢， 你也是个好人。 ：）
      

  9.   

    老萝出手了，呵呵
    gzdiablo兄弟，FF的插件还是很好的哟，你可以试试firebug，用它看DOM结构，JS错误，页面分级加载速度都很不错^_^
      

  10.   

    竟然出动prototype ...
    其实只要一个 获取FF下Xpath的方法 改下创建XMLDOM的方法就可以了
      

  11.   

    rob123()大哥， 你写的代码有点问题， 我输出一次再去重新选择下拉列表就不会有输出了。
      

  12.   

    document.body.innerHTML += "<br/>"
    + currentItem.childNodes[i].childNodes[j].tagName + ":"
    + currentItem.childNodes[i].childNodes[j].text
    + "<br/>"
    输出区域你改一下就好了。
    比如
    html:
    <div id="record"></div>
    js:
    $("record").innerHTML = "<br/>"
    + currentItem.childNodes[i].childNodes[j].tagName + ":"
    + currentItem.childNodes[i].childNodes[j].text
    + "<br/>"