求js+xml生成下拉带二级导航条的代码

Question

是这样的不?
<select name="selID" id="selID" style="width:100px"></select>
<script language="javascript">
var v1='a,1|b,2|c,3|d,4|a,1|b,2|c,3|d,4';//此数据从XML中读取^
var obj=document.getElementById('selID');
var v2=v1.split('|');
for(var i=0;i<v2.length;i++){
var v3=v2[i].split(',');
obj.options.add(new Option(v3[0],v3[1]));
}
obj.onchange=function(){alert(this.value)};
</script>

Answer 1

不好意思看错了,你要的是这种效果吧:
http://www.02dz.cn/t/

Answer 2

对呀，对呀。效果是这个样子的，但是不是要的那种单纯js写成的，因为我想把链接跟文字存储到xml中读出来，这样以后只改写xml就可以了！楼上有代码吗？

Answer 3

xmlTest.css  ---------------------------------------------
@import url("http://style.china.alibaba.com/css/blog/alicn_bb.css?t=0708241");
table{+margin:-1px;border-collapse:collapse;}
.wnav dl.fc{zoom:1;padding-left:0px;height:auto;line-height:18px;background:#fff;}
.wnav dl.fc dd{position:relative;float:left;display:inline;margin-left:0px;margin-right:3px;text-align:center;cursor:pointer;background:#6699CC;}
.wnav dl.fc dd a{position:relative;float:left;display:block;height:100%;width:80px;padding:0px 14px;border:1px solid #000;z-index:3}
.wnav dl.fc dd a:link, dl.fc dd a:visited{background:#fff;}
.wnav dl.fc dd a:hover{color:#fff;background:transparent;}
* +html .wnav dl.fc dd a:active{+color:#000;+background:#fff;}
.wnav dl.fc dd a.hov{border-bottom:none;font-weight:bold;line-height:19px;color:#000 !important;background:#fff url(http://img.china.alibaba.com/images/unsort/graybrim.gif) left repeat-y !important;cursor:default}
.wnav dl.fc dd .us a{float:none;padding:0px;border:none;text-align:left;width:auto;}.wnav .us {position:absolute;line-height:19px;border:1px solid #000;border-bottom:none;width:140px;background:#fff url(http://img.china.alibaba.com/images/unsort/graybrim.gif) left repeat-y;z-index:2}
.wnav .us ul{zoom:1;margin:5px 0px 0px 0px;padding:0px 0px 5px 0px;border-bottom:1px solid #000}
.wnav .us li{position:relative;vertical-align:middle;}
.wnav dl.fc dd .us li{_width:100%;_overflow:hidden;}
.wnav dl.fc dd .us li a{display:block;padding-left:25px;height:100%;vertical-align:middle;}
.wnav dl.fc dd .us li a:link, .wnav .us li a:visited{background:transparent;}
.wnav dl.fc dd .us li a:hover{color:#808080;background:#D7D6E8;}
.wnav dl.fc dd  .us li a.hc:link, .wnav .us li a.hc:visited{background:url(http://img.china.alibaba.com/images/unsort/triang_r.gif) 132px 5px no-repeat;}
.wnav dl.fc dd  .us li a.hc:hover{background:#D7D6E8 url(http://img.china.alibaba.com/images/unsort/triang_r.gif) 135px 6px no-repeat;}.wnav dl.fc dd a{width:80px;}
.wnav .us{display:block;left:140px;top:0px;margin-top:0px}
.wnav .us_t{display:block;left:0px;top:auto;margin-top:19px}.wnav table{display:none;_display:block}
.wnav dl.fc dd .us li:hover > table{display:block;margin-bottom:0px;}
.wnav dl.fc dd .us li.hover {_overflow:visible;}

Answer 4

xmlTest.xsl  ---------------------------------------------<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:bookObj="http://my_object"
      xmlns:msxsl="urn:schemas-microsoft-com:xslt"
      xmlns:dah="urn:my-scripts">
     <xsl:output method="html" omit-xml-declaration="yes" indent="yes" />
<!--
omit-xml-declaration="yes"  :  忽略 xml 声明
indent="yes" :  缩进元素
-->
<!--根节点 模板 开始-->
<xsl:template match="/"><div class="wnav">
<!-- 导航总目 start -->
<dl id="fc" class="fc ll lk_n">
<xsl:for-each select="root/org">

<xsl:variable name="strOrgName" select="@oName" />
<xsl:variable name="strOrgValue" select="@oID" />
<dd><xsl:element name="a">
<xsl:attribute name="id">fc_<xsl:number value="position()-1" format="1" /></xsl:attribute>
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute>
<xsl:attribute name="valo"><xsl:value-of select="$strOrgValue" /></xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="$strOrgName" /></xsl:attribute>
<xsl:value-of select="$strOrgName" />
</xsl:element>
<xsl:if test="org"> 
<!-- 无限级子目 start -->
<xsl:element name="div">
<xsl:attribute name="id">fc_<xsl:number value="position()-1" format="1" />_us</xsl:attribute>
<xsl:attribute name="class">us us_t lk_n dn</xsl:attribute>
<ul>
<xsl:apply-templates />
</ul>
</xsl:element>
<!-- 无限级子目 end -->
</xsl:if> 
</dd>
</xsl:for-each>
</dl>
<!-- 导航总目 end -->
<div class="c"></div>

</div></xsl:template>
<!--根节点 模板 结束--><!--无限节点 模板 开始-->
<xsl:template match="root/org//org">
<xsl:variable name="strOrgName" select="@oName" />
<xsl:variable name="strOrgValue" select="@oID" />
<li onmouseover="liOverforIE6(this)" onmouseout="liOutforIE6(this)">
<xsl:choose>
<xsl:when test="org">
<xsl:element name="a">
<xsl:attribute name="class">hc</xsl:attribute>
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="$strOrgName" /></xsl:attribute>
<xsl:value-of select="$strOrgName" />
</xsl:element>
<table cellpadding="0" cellspacing="0"><tr><td>
<!-- 无限级子目 start -->
<div class="us">
<ul>
<xsl:apply-templates />
</ul>
</div>
<div class="c"></div>
<!-- 无限级子目 end -->
</td></tr></table>
</xsl:when>
<xsl:otherwise>
<xsl:element name="a">
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="$strOrgName" /></xsl:attribute>
<xsl:value-of select="$strOrgName" />
</xsl:element>
</xsl:otherwise>
</xsl:choose>
</li>
<xsl:if test="@gpend=1"> 
   
</xsl:if> 
</xsl:template>
<!--无限节点 模板 结束--></xsl:stylesheet>

Answer 5

xmlTest.xml  -------------------------------------
<?xml version="1.0" encoding="gb2312"?>
<root>
<org oName="化工" oID="022" hsChild="1">

</org><org oName="塑料" oID="030" hsChild="1">

</org>
<org oName="石油" oID="032" hsChild="1">
<org oName="市场报价" oID="032003" hsChild="1">
<org oName="国际原油油品" oID="032003001" hsChild="1">
<org oName="际原油-收盘价格细报" oID="032003001001"></org>
<org oName="国际原油-盘中时时报价" oID="032003001002"></org>
<org oName="国际原油-分析" oID="032003001003"></org>
<org oName="国际油品-价格" oID="032003001004"></org>
<org oName="国际原油-收盘价格早报" oID="032003001006"></org>
</org>
<org oName="汽柴油" oID="032003002">
<org oName="汽柴油-华北市场行情分析" oID="032003002001"></org>
<org oName="汽柴油-北京价格及评述" oID="032003002002"></org>

</org>
<org oName="液化气" oID="032003003">
<org oName="LPG-国际液化气价格" oID="032003003001"></org>
<org oName="LPG-东北市场走势分析" oID="032003003002"></org>

</org>
<org oName="燃料油" oID="032003004">
<org oName="燃料油-国际收盘价格" oID="032003004001"></org>

</org>
<org oName="石油焦" oID="032003005">
<org oName="石油焦-东北市场报价" oID="032003005001"></org>

</org>
<org oName="沥青" oID="032003006">
<org oName="沥青-华北沥青市场报价" oID="032003006002"></org>

</org>
<org oName="溶剂油" oID="032003007">
<org oName="溶剂油-东北市场报价" oID="032003007001"></org>

</org>
<org oName="石蜡" oID="032003008">

</org>
<org oName="润滑油" oID="032003009">
<org oName="润滑油-基础油报价" oID="032003009001"></org>
<org oName="润滑油-成品油报价" oID="032003009002"></org>
</org>
</org>
</org>
<org oName="测试分类" oID="088" hsChild="1">
</org>
</root>

Answer 6

xmlTest.js -----------------------------------
//浏览器识别
var Browser = { 
'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
'isIE6' : (document.all && !window.XMLHttpRequest) ,
'isIE7' : (document.all && window.XMLHttpRequest) ,
'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0, 
'isOpera' : navigator.userAgent.indexOf('Opera') >= 0 
}; function createXML(u,f){
var xmlDom,pi
if (window.ActiveXObject) 
xmlDom=new ActiveXObject("Microsoft.XMLDOM");
else if (document.implementation&&document.implementation.createDocument)
xmlDom=document.implementation.createDocument("","",null);
xmlDom.async = f || false
xmlDom.preserveWhiteSpace=true;
if(u!="" && u!=null)
xmlDom.load(u)
return xmlDom
}//返回值为转化为处理器oXslProcessor, 调用完该函数后, 可以视情形载入新的object
function cXML_to_HTML(xmlPath,xslPath){
if(Browser.isIE){
var oXmlDom = createXML(xmlPath)
var oXslDom = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
oXslDom.async = false;
oXslDom.load(xslPath)

//创建XSL模板对象
var oXslTemplate = new ActiveXObject("Msxml2.XSLTemplate.3.0");
oXslTemplate.stylesheet = oXslDom
var oXslProcessor = oXslTemplate.createProcessor();
oXslProcessor.input = oXmlDom;
oXslProcessor.transform();
oXslProcessor.transform()
return oXslProcessor.output
//......调用完该函数后, 可以视情形载入新的object
}else if(Browser.isFirefox){
var oXmlDom = createXML(xmlPath)
var oXslDom = createXML(xslPath)
var oXsltProcessor = new XSLTProcessor()
oXsltProcessor.importStylesheet(oXslDom)
var oNewDom = oXsltProcessor.transformToDocument(oXmlDom)
var oSerializer = new XMLSerializer()
return oSerializer.serializeToString(oNewDom)
}
}function addEvent(el,eventType,fn){
if(el.addEventListener){
el.addEventListener(eventType,fn,false);
}else if(el.attachEvent){
el.attachEvent("on" + eventType,fn);
}else{
el["on"+eventType]=fn;
}
}addEvent(window,'load',new Function("fcInitialize('fc')"))
addEvent(window,'load',new Function("aLnkInitialize('fc')"))
function fcInitialize(nm){
var ula = document.getElementById(nm)
var lisa = ula.getElementsByTagName('dd')
var i
for(i=0; i<lisa.length; i++){
//lisa[i].setAttribute('num',i)
var tmp
if(tmp = document.getElementById(nm+'_'+i)){
tmp.onclick = function(){
this.innerHTML = this.getAttribute('title')
this.setAttribute('val',this.getAttribute('valo'))
var fc = document.getElementById(nm)
if(fc.getAttribute('curr') && fc.getAttribute('curr') != this.id){
var b = document.getElementById(fc.getAttribute('curr'))
b.className = ''
b.innerHTML = b.title
b.setAttribute('val',b.getAttribute('valo'))
document.getElementById(fc.getAttribute('curr')+'_us').className += ' dn'

}
var us = document.getElementById(this.id+'_us')
if(us && us.className.match(/(\s)*dn(\s)*/g)){
this.className = 'hov'
us.className = us.className.replace(/(\s)*dn(\s)*/g,' ')
fc.setAttribute('curr',this.id)
}else if(us){
this.className = ''
us.className += ' dn'
//this.blur()
  }
return false
}
}
}
} function aLnkInitialize(nm){
var ula = document.getElementById(nm) 
var lnks = ula.getElementsByTagName('a')

for(var i=0; i<lnks.length; i++){
if(!lnks[i].id){
lnks[i].onclick = function(){
var u = upback(this)
}
}
}
}function upback(o){
var s = o.innerHTML
var v = o.getAttribute('val')
for(;!o.id;o=o.parentNode){}
var a = document.getElementById(o.id.substring(0,o.id.length-3))
a.innerHTML = s
a.setAttribute('val',v)
}function liOverforIE6(o){
if(Browser.isIE6){
o.className = 'hover'
}
}function liOutforIE6(o){
if(Browser.isIE6){
o.className = ''
}
}

Answer 7

test.html  ---------------------------------------<!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>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
@import url("xmlTest.css");
</style>
<script src="xmlTest.js"></script>
</head><body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var p = cXML_to_HTML("xmlTest.xml","xmlTest.xsl")
document.write(p)
//document.getElementById("txtar").value = p
//-->
</SCRIPT>
<div class="" style="height:500px"></div>
<input type="button" value="取第一个值" onclick="getValue(0)" />
<input type="button" value="取第二个值" onclick="getValue(1)" />
<input type="button" value="取第三个值" onclick="getValue(2)" />
<script type="text/javascript">
<!--
function getValue(n){
var o
if(o = document.getElementById('fc_'+n)){
alert(o.innerHTML + ':' + o.getAttribute('val'))
}
}
//-->
</script>
</body>
</html>几个文件放一起吧，然后执行test.html，借鉴了很多大侠的经验。

Answer 8

噢，对了，推荐使用ie7 和 ff。ie6下效果不佳。

Answer 9

如果使用的是opera 浏览器，请在js 文件里把
function cXML_to_HTML(xmlPath,xslPath) 函数修改下，
我忘了判断 opera。只用把 }else if(Browser.isFirefox){修改成 }else if(Browser.isFirefox || Browser.isOpera){

Answer 10

谢谢楼上，我怎么才能把oID换成对应的网页值让其在点击时候触发打开相应的网页呢？小弟系js新手

Answer 11

js文件里去掉或注释这一行addEvent(window,'load',new Function("aLnkInitialize('fc')"))xsl文件里 
<!--无限节点 模板 开始-->
...
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute>
--->
---> 这两行修改成一行
<xsl:attribute name="href"><xsl:value-of select="$strOrgValue" /></xsl:attribute>...这就把 oID里的值放入 子节点的 href里了，当然首先你生成的oID要是正确的连接地址。另外，xml 文件里 hsChild="1" 这个属性值可以不需要，你生成达到  xml 只需要 oName 和 oID

Answer 12

晕 还原代码！你直接复制了<xsl:attribute   name= "href "> <xsl:value-of   select= "$strOrgValue "   /> </xsl:attribute> 
会出问题的！手敲吧！js文件里去掉或注释这一行 //addEvent(window, 'load ',new   Function( "aLnkInitialize( 'fc ') ")) 
xsl文件里     ！
<!--无限节点   模板   开始--> 
...
<xsl:attribute   name= "href "> # </xsl:attribute> 这行改成<xsl:attribute name="href"><xsl:value-of select="$strOrgValue" /></xsl:attribute>

Answer 13

我改过js和xsl文件后菜单出来了，。但是点击没有反应
===========
以下是我修改的xml文件=====
<?xml version="1.0" encoding="gb2312"?>
<root>
<org oName="化工" oID="022" hsChild="1">
    
            <org oName="际原油-收盘价格细报" oID="http://www.sina.com"></org>
            <org oName="国际原油-盘中时时报价" oID="032003001002"></org>
            <org oName="国际原油-分析" oID="032003001003"></org>
            <org oName="国际油品-价格" oID="032003001004"></org>
            <org oName="国际原油-收盘价格早报" oID="032003001006"></org>
         
</org><org oName="塑料" oID="030" hsChild="1">
    
</org>
<org oName="石油" oID="032" hsChild="1">
    <org oName="市场报价" oID="032003" hsChild="1">
        <org oName="国际原油油品" oID="032003001" hsChild="1">
            <org oName="际原油-收盘价格细报" oID="032003001001"></org>
            <org oName="国际原油-盘中时时报价" oID="032003001002"></org>
            <org oName="国际原油-分析" oID="032003001003"></org>
            <org oName="国际油品-价格" oID="032003001004"></org>
            <org oName="国际原油-收盘价格早报" oID="032003001006"></org>
        </org>    
        <org oName="汽柴油" oID="032003002">
            <org oName="汽柴油-华北市场行情分析" oID="032003002001"></org>
            <org oName="汽柴油-北京价格及评述" oID="032003002002"></org>
            
        </org>
        <org oName="液化气" oID="032003003">
            <org oName="LPG-国际液化气价格" oID="032003003001"></org>
            <org oName="LPG-东北市场走势分析" oID="032003003002"></org>
            
        </org>
        <org oName="燃料油" oID="032003004">
            <org oName="燃料油-国际收盘价格" oID="032003004001"></org>
        
        </org>
        <org oName="石油焦" oID="032003005">
            <org oName="石油焦-东北市场报价" oID="032003005001"></org>
            
        </org>
        <org oName="沥青" oID="032003006">
            <org oName="沥青-华北沥青市场报价" oID="032003006002"></org>
            
        </org>
        <org oName="溶剂油" oID="032003007">
            <org oName="溶剂油-东北市场报价" oID="032003007001"></org>
        
        </org>
        <org oName="石蜡" oID="032003008">
            
        </org>
        <org oName="润滑油" oID="032003009">
            <org oName="润滑油-基础油报价" oID="032003009001"></org>
            <org oName="润滑油-成品油报价" oID="032003009002"></org>
        </org>
    </org>
</org>
<org oName="测试分类" oID="088" hsChild="1">
</org>
</root>

Answer 14

为什么这样不行啊？我只有弄到如下的状态的才行！
==========
<?xml version="1.0" encoding="gb2312"?>
<root>
<org oName="化工" oID="022" >
    
          
</org><org oName="塑料" oID="030" hsChild="1">
    
</org>
<org oName="石油" oID="032" hsChild="1">
    <org oName="市场报价" oID="032003" hsChild="1">
        <org oName="国际原油油品" oID="032003001" hsChild="1">
            <org oName="际原油-收盘价格细报" oID="http://www.sina.com"></org>
            <org oName="国际原油-盘中时时报价" oID="032003001002"></org>
            <org oName="国际原油-分析" oID="032003001003"></org>
            <org oName="国际油品-价格" oID="032003001004"></org>
            <org oName="国际原油-收盘价格早报" oID="032003001006"></org>
        </org>    
        <org oName="汽柴油" oID="http://www.sina.com">
            <org oName="汽柴油-华北市场行情分析" oID="032003002001"></org>
            <org oName="汽柴油-北京价格及评述" oID="032003002002"></org>
            
        </org>
        <org oName="液化气" oID="http://www.sina.com">
            <org oName="LPG-国际液化气价格" oID="032003003001"></org>
            <org oName="LPG-东北市场走势分析" oID="032003003002"></org>
            
        </org>
        <org oName="燃料油" oID="032003004">
            <org oName="燃料油-国际收盘价格" oID="032003004001"></org>
        
        </org>
        <org oName="石油焦" oID="032003005">
            <org oName="石油焦-东北市场报价" oID="032003005001"></org>
            
        </org>
        <org oName="沥青" oID="032003006">
            <org oName="沥青-华北沥青市场报价" oID="032003006002"></org>
            
        </org>
        <org oName="溶剂油" oID="032003007">
            <org oName="溶剂油-东北市场报价" oID="032003007001"></org>
        
        </org>
        <org oName="石蜡" oID="032003008">
            
        </org>
        <org oName="润滑油" oID="032003009">
            <org oName="润滑油-基础油报价" oID="032003009001"></org>
            <org oName="润滑油-成品油报价" oID="032003009002"></org>
        </org>
    </org>
</org>
<org oName="测试分类" oID="088" hsChild="1">
</org>
</root>

Answer 15

http://d.download.csdn.net/down/285758/balibell

Answer 16

汗！小弟只有3分了，有那位老大给一个啊。E-mail:
[email protected]