300分求助（3次付清）

Question

小弟对JS一窍不通，请大家伸援手，最好写详细些，拿过来就能用！
xml文件如下：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root code="root">
  <list code="jiaoyu" name="教育">
    <list code="kaoyan" name="考研">
    <list code="zhaosheng" name="招生">
    <list code="peixun" name="培训">
  </list>
  <list code="xinwen" name="新闻">
    <list code="guonei" name="国内">
    <list code="shehui" name="社会">
    <list code="guoji" name="国际">
  </list>
  <list code="jiaoyu" name="体育">
    <list code="zuqiu" name="足球">
    <list code="NBA" name="NBA">
    <list code="wangqiu" name="网球">
  </list>
要求实现效果：1：用JS读取,在页面上实现这样的效果
     教育（父结点）
       考研    招生     培训
     新闻
       国内    社会     国际
     体育
       足球    NBA     网球2：最好可以自定义样式，而且点击父节点（如：教育）的时候子节点（如：考研    招生     培训）才从父节点下面的那个层里显示出来（开始时并不显示的）！3：而且在页面的下面还有个层，当我点击了诸如“考研”和“NBA”时下面那个层里就会相应的显示如下：
/*****************************************************/
  考研                                              【删除】
   NBA                                        【删除】
/*****************************************************/
可以删除所选这两项！（尽量不用服务器控件）4：在页面后台怎么获取我选择的（“考研”和“NBA”）值？目前急需的就以上4项！！！
大侠现身显身手！

Answer 1

不用js我就会，但上面要求交互性，所以只要用JS！

Answer 2

可以参考一下这里：
http://www.v-ec.com/dh20156/code/dhxmltreeview/dhxmltreeAJ.htmJS地址：
http://www.v-ec.com/dh20156/code/dhxmltreeview/dhXmlTreeView.js较早前写的一个加载xml文件生成的树，参考下加载xml文件的方法就好了，其他的东西都没啥大价值！

Answer 3

接分过节  元旦新年同乐set get

Answer 4

//针对所给XML
var dom = new ActiveXObject("MSXML.DOMDocument");
dom.async = false;
var xml = dom.load(xmlfilepath);
var list = xml.documentElement.getElementsByTagName("list");
for(var i=0;i<list.length;i++)
{
  if(i%4==0) document.write(list[i].getAttribute("name"));
  else document.write("&nbsp;&nbsp;"+list[i].getAttribute("name"));
}

Answer 5

- -
很简单的说~~不过楼主的xml文档明显不是"合式"的~~
子list标签都没有闭合...

Answer 6

连showbo都不帮你~~~
他是这段时间最勤奋的银，祝你遇到你的恩公
其次大家也不是无所事事的
新年快乐~~~

Answer 7

下面这个是ajax返回xml的处理函数，你照着改一改吧，实在是没时间细看你的需求了， function protable(){
 
  if (http_request.readyState == 4) { // 判断对象状态

if (http_request.status == 200) { // 信息已经成功返回，开始处理信息 var xmlDoc; var moz = (typeof document.implementation != 'undefined') 
   && (typeof document.implementation.createDocument != 'undefined');
 var ie = (typeof window.ActiveXObject != 'undefined'); if (moz) {
   xmlDoc = document.implementation.createDocument("", "doc", null); } else if (ie) {
   xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
   xmlDoc.async = false;
   
 }
 xmlDoc.load(http_request.responseXML);
 if (moz) {
 var zip = xmlDoc.getElementsByTagName("pro")[0];
 
    var _city = zip.getElementsByTagName("proName")[0].firstChild.nodeValue;
     // if (_city)   city = _city.Trim();
      alert("moz:"+_city);      
} else if (ie) {

    var yy=xmlDoc.documentElement;
    var pros = yy.selectSingleNode("//pros").childNodes;
     for(var i=0;i<pros.length;i++){
      var prdName = pros[i].selectSingleNode("prdName").text;
      var companyCode = pros[i].selectSingleNode("companyCode").text;
      var companyName = pros[i].selectSingleNode("companyName").text;
                                            .............................
var sub1= pros[i].selectSingleNode("sub1").text;
var sub2= pros[i].selectSingleNode("sub2").text;
var sub3= pros[i].selectSingleNode("sub3").text;
var sub4= pros[i].selectSingleNode("sub4").text;
var sub5= pros[i].selectSingleNode("sub5").text;
//--------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------
  var   getTb=   document.getElementById("table1");   
  var   crTR   =   getTb.insertRow();   //行已经加完了，再加一个包含td和另一个带rowspan=2的TD，当然，是在TR的基础上;   
  var   crTDa   =   crTR.insertCell();   //第一个TD ,带rowspan=4   
  var   crTDb   =   crTR.insertCell();   //第二个TD, 
  var   crTDc   =   crTR.insertCell();   
        crTDa.rowSpan=2;    //设成   rowspan=4;
        crTDa.width=60;
        crTDb.height=40;
        crTDb.width=180;
        crTDc.height=20;
  //添加完了，写点内容吧。 
  var inputs = document.createElement("<INPUT name='radio' type='radio'>");        //创建单选钮
//inputs.type ="radio";
          inputs.value = proCode;
          inputs.name = price;  
  crTDa.innerHTML="<b>"+prdName+"<br />"+proTypes+"款</b>"; 
  crTDa.appendChild(inputs);  
  crTDb.innerHTML="<font style=font:14pt ><b>保费价格:"+price+"元</b></font>";  //face=隶书 color=000000
  crTDc.innerHTML="意外身故险保额(元):"+accidentalDeath+"<br />意外残疾险保额(元):"+accidentalDisableds+"<br />意外医疗险保额(元):"+accidentalMedicalCosts;
   
  var   croTR   =   getTb.insertRow();   //再插入一个TR   
  var   crTDd   =   croTR.insertCell();   //TD,对应上边的rowspan=2的TD   
  var   crTDe   =   croTR.insertCell();
   crTDd.height=20;
        crTDe.height=20;
crTDd.innerHTML="救援费用:<br />"+sub1+"元";    
crTDe.innerHTML="行李丢失险保额(元):"+sub2+"<br />急性病身故险保额(元):"+sub3+"<br />第三者险保额(元):"+sub4;        
      }
   //  var pro=_city[0].selectSingleNode("proName");
   // alert("ie:"+pro.text);
      }  
  ordB(); }else { //页面不正常
alert("您所请求的页面有异常.....");
}
} 
}

Answer 8

=================================这个是js显示、隐藏的例子=========================================
// JavaScript Document//=======================================================
//函数名称：getObject(objectId)
//          参数objectId:控件的ID值
//函数功能：获得控件的ID值
//返 回 值：ture(获得ID值) false(获取ID失败)
//=======================================================
function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) 
    {
      // W3C DOM
      return document.getElementById(objectId);
    } 
    
    else if (document.all && document.all(objectId)) 
    {
      // MSIE 4 DOM
      return document.all(objectId);
    }
    
    else if (document.layers && document.layers[objectId])
    {
      // NN 4 DOM.. note: this won't find nested layers
      return document.layers[objectId];
    }
    
    else
    {
      return false;
    }
}// 显示列表框
function displayList(n,dHeight){  
            var h = getObject('menu'+ n).offsetHeight;  // 内容容器class_cnt1的初始高度（这时高度为：0）
          var max_h = dHeight; // 容器的最大高度
        
          
          var anim = function(){            
                    h += 41; // 每次递增20像素
                    
                    //如果增加的高度开始超过容的最大高度
                    if(h >= max_h)
                    { 
                      getObject('menu'+ n).style.height = dHeight; // 工期高度为287px(因为我们只希望容器这么高)
                      getObject('img'+ n).src="/static/img06/icon_close.gif"; // 让图片标签改变背景           
                      if(loop)
                      {
                          window.clearInterval(loop);
                      } // 如果高度在每2毫秒递减，则清除该行为（如果不清除，程序将一直自动运行高度每2毫秒递减）
                    }
                    
                    else
                    {
                        // 如果增加中的容器高度没有超过最大高度
                        getObject('menu'+ n).style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）
                        getObject('menu'+ n).style.height = h + "px"; // 容器高度不断的以20px递增
                    }
            }
               
              var loop = window.setInterval(anim,10); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）    
}// 隐藏列表框
function hiddenList(n,dHeight){
       var h = getObject('menu'+ n).offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：最大高度）
           var anim = function()
           {
                 h -= 41; // 每次递减20像素
                 
                 if(h <= 5)
                 {
                   getObject('menu'+ n).style.display="none"; // 内容容器不可见（当容器高度小于5px）
                   //getObject('img'+ n).src="/static/img06/icon_open.gif";
                   if(loop)
                   {
                       window.clearInterval(loop);
                   }
                 }
                 
                 else{
                   getObject('menu'+ n).style.height = h + "px"; // // 容器高度不断的以20px递减 
                 }
           }
             
           var loop = window.setInterval(anim,10); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减10px]）
}//=======================================================
//函数名称：showClassList()
//函数功能：隐藏-显示级分类列表框（class_cnt1）
//返 回 值：无
//=======================================================
function showClassList(n,dHeight){
    var dHeight=dHeight   // 如果内容容器为不可见的display:none
   if(getObject('menu'+ n).style.display == "none"){ 
          //getObject('tdTitle' + n).title = "点击收缩"
       //getObject('showTxt' + n).innerText = "(点击收缩)"
       displayList(n,dHeight); // 显示内容框
   }
   else{ // 如果内容容器为可见的display:block
       //getObject('tdTitle' + n).title = "点击展开"
       //getObject('showTxt' + n).innerText = "(点击展开)"
       hiddenList(n,dHeight); // 隐藏内容框
         
     }
}
===============================页面===============================================
<a href="javascript:void(0)" onClick="showClassList(1,300)" style="cursor:hand">
<span>请选择</span></a> &nbsp</a><div id="menu1">
<input onclick="test()" type="checkbox" id="10000"  value="奥地利" />奥地利 <input onclick="test()" type="checkbox" id="10000"  value="比利时" />比利时 <input onclick="test()" type="checkbox" id="10000"  value="法国" />法国 

</div>
<div >
<span>世界其它国家或地区请选择：</span><input type="text" id="guojias" onClick="showClassList(2,650)" />
</div>
<div id="menu2">
&nbsp;<span><strong>亚洲地区：</strong></span><br/>
   <input onclick="test()" type="checkbox" id="23000"  value="吉尔吉斯坦"/>吉尔吉斯坦 <input onclick="test()" type="checkbox" id="23040"  value="亚美尼亚" />亚美尼亚 <input onclick="test()" type="checkbox" id="23020"  value="几内亚" />几内亚
</div>
<br/>&nbsp;<span onClick="showClassList(3,650)"><strong>欧洲地区：</strong></span><br/>
<div id="menu3">
 <input onclick="test()" type="checkbox" id="23100"  value="马其顿" />马其顿
</div>
<br/>&nbsp;<span onClick="showClassList(4,650)"><strong>北美洲地区：</strong></span><br/>
<div id="menu4">
<input onclick="test()" type="checkbox" id="10000"  value="美国" />美国 <input onclick="test()" type="checkbox" id="10000"  value="加拿大" />加拿大 <input onclick="test()" type="checkbox" id="10000"  value="墨西哥" />墨西哥 <input onclick="test()" type="checkbox" id="10000"  value="牙买加" />牙买加 <input onclick="test()" type="checkbox" id="10000"  value="多米尼加" />多米尼加
</div>
=============================================
这是几段代码，不是完整页面，你主要看看他功能实现的方式，应该对你有帮助，另外新学一样东西一定要多实验，多找答案，并不见得要人给你完整的答案。

Answer 9

做了一个～～
有些小缺点：只支持2层，code或name属性不能包含:左右括号和单双引号(因为正则没写太严格)
外表比较丑，你自己改<!-- 装数据的textarea -->
<textarea id="doc" style="display:none">
<?xml   version="1.0"   encoding="UTF-8"   standalone="yes"?> 
<root   code="root"> 
    <list   code="jiaoyu"   name="教育" > 
        <list   code="kaoyan"   name="考研" /> 
        <list   code="zhaosheng"   name="招生" /> 
        <list   code="peixun"   name="培训" /> 
    </list> 
    <list   code="xinwen"   name="新闻"> 
        <list   code="guonei"   name="国内" /> 
        <list   code="shehui"   name="社会" /> 
        <list   code="guoji"   name="国际" /> 
    </list> 
    <list   code="jiaoyu"   name="体育"> 
        <list   code="zuqiu"   name="足球" /> 
        <list   code="NBA"   name="NBA" /> 
        <list   code="wangqiu"   name="网球" /> 
    </list> 
</root>
</textarea>
<!-- 显示列表的层 -->
<div id="list"></div><!-- 显示删除按钮的层 -->
<div id="control"></div>
<script>
window.onload=function(){
    initList();
}
function initList(){
    /* 以文本形式获得要解析的xml文档 */
    var text=document.getElementById("doc").value;    /* 提取第一级list */
    var reg=/<list[^>]*>(?:(?!<\/list>)[\s\S])*<\/list>/g;
    var m=text.match(reg);
    for(var i=0,j=m.length;i<j;i++){
        var node=new ListNode(m[i],true);
        document.getElementById("list").appendChild(node.getHTMLElement());
    }
}/* ListNode数据类型,
2个参数 up是这个节点的脚本 hasChild是是否拥有子节点
例如up为 
    <list   code="jiaoyu"   name="体育"> 
        <list   code="zuqiu"   name="足球" /> 
        <list   code="NBA"   name="NBA" /> 
        <list   code="wangqiu"   name="网球" /> 
    </list> 
那么传进去后由这个对象进行解析，解析出code和name属性以及子节点
分别是_getCode();_getName();_getChildren() 3个函数
*/
function ListNode(up,hasChild){
    this.up=up;
    this.code=null;
    this.name=null;
    this._getCode();
    this._getName();
    if(hasChild){
        this.nodes=[];
        this._getChildren();
    }else{ this.nodes=null ;}
}/*
分析脚本，如：<list   code="jiaoyu"   name="体育"> 
获取其中的code和name属性
*/
ListNode.prototype._getCode=function(){
    var reg=/^<list\s(?:(?!code=|>).)*code\s?=\s?["']([^"'>]*)["'][^>]*>/;
    var m=this.up.match(reg);
    this.code=m[1];
}
ListNode.prototype._getName=function(text){
    var reg=/^<list\s(?:(?!name=|>).)*name\s?=\s?["']([^>]*)["'][^>]*>/;
    var m=this.up.match(reg);
    this.name=m[1];
}ListNode.prototype._getChildren=function(){
    var reg=/<list[^\/>]*\/>/g;
    var m=this.up.match(reg);
    for(var i=0,j=m.length;i<j;i++){
        var node=new ListNode(m[i],false);
        this.nodes.push(node);
    }
}/* 重写toString()函数 方便调试用的*/
ListNode.prototype.toString=function(){
    var str=[];
    str.push("Name:"+this.name+",");
    str.push("Code:"+this.code+"\n");
    if(this.nodes!=null){
        for(var i=0,j=this.nodes.length;i<j;i++){
            str.push("    "+this.nodes[i]);
        }
    }
    return str.join("");
}/* 子节点 如：篮球、NBA 的点击处理 */
ListNode.prototype.childrenClick=function(){
    var tmp="delete.asp?code="+this.code+"&name="+escape(this.name);
    var html=this.name+"<a href='"+tmp+"'>【删除】<\/a>";
    document.getElementById("control").innerHTML=html;
}/* 标题节点 如：体育  的点击处理 */
ListNode.prototype.bodyClick=function(){
    var display=this._UI.childLayer.style.display;
    this._UI.childLayer.style.display=(display=="none"?"":"none");
}/* 把对象转化为html元素 */
ListNode.prototype.getHTMLElement=function(){
    var e;
    var listNode=this; 
    if(this.nodes==null){
        e=document.createElement("span");
        this._UI=e;
        e.className="childNode";
        e.innerHTML=this.name;
        e.onclick=function(){
            listNode.childrenClick(this);
        }
    }else{
        e=document.createElement("div");
        this._UI=e;
        e.className="listNode";
        e.bodyLayer=document.createElement("div");
        e.bodyLayer.innerHTML=this.name;
        e.bodyLayer.className="bodyLayer"
        e.childLayer=document.createElement("div");
        e.childLayer.style.display="none";
        e.childLayer.className="childLayer";
        for(var i=0,j=this.nodes.length;i<j;i++){
            e.childLayer.appendChild(this.nodes[i].getHTMLElement());
        }
        e.appendChild(e.bodyLayer);
        e.appendChild(e.childLayer);
        e.bodyLayer.onclick=function(){
            listNode.bodyClick();
        }
    }
    return e;
}</script>
<!-- 样式自己改，看颜色你就知道是哪个元素了 -->
<style>
#list{
    display:block;
    width:300px;
    heigth:auto;
}
#control{
    background-color:pink;
    display:block;
    width:300px;
    heigth:auto;
}
.listNode{}
.childNode{
    background-color:white;
    margin:10px;
}
.childLayer{
    background-color:black;
}
.bodyLayer{
    background-color:gold;
}
</style>

Answer 10

你的 XML 格式不规范
data.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root code="root">
  <Plist code="jiaoyu" name="教育">
    <list code="kaoyan" name="考研" />
    <list code="zhaosheng" name="招生" />
    <list code="peixun" name="培训" />
  </Plist>
  <Plist code="xinwen" name="新闻">
    <list code="guonei" name="国内" />
    <list code="shehui" name="社会" />
    <list code="guoji" name="国际" />
  </Plist>
  <Plist code="jiaoyu" name="体育">
    <list code="zuqiu" name="足球" />
    <list code="NBA" name="NBA" />
    <list code="wangqiu" name="网球" />
  </Plist>
</root>index.htm<html>
<head>
<style type="text/css">
/* 现在的 CSS 样式是乱来的,自己修改 */
#list {
background: #f00;
padding: 2px;
}
.div1 {
background: #8f8;
width: 500px;
margin: 10px;
}
.div2 {
border: 1px solid #000;
width: 100px;
margin: 3px;
color: #fff;
}
.div2 A { color: #004; }
.div3 {
border: 1px dotted #00f;
margin: 3px;
}
.div4 {
margin: 3px;
background: #000;
display: inline;
}
.div4 A { color: #fff; }#slc {
background: #f0f;
width: 400px;
}
.div5 {
border: 1px solid #000;
line-height: 30px;
display: inline;
}
.div6 {
background: #fff;
line-height: 30px;
display: inline;
}
</style>
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">
var doc = new ActiveXObject("Microsoft.XMLDOM"); 
doc.async = false; 
doc.load("data.xml");
nodes = doc.documentElement.childNodes;function addRecord(id, i) {
var did = "SN_" + id + "_" + i;
var div = document.getElementById(did);
if (div) return;
div = document.createElement("DIV");
div.setAttribute("id", did);
div.innerHTML = "<div class='div5'>" + nodes[id].childNodes[i].getAttribute("name") + "</div>";
div.innerHTML += "&nbsp";
div.innerHTML += "<div class='div6'><a href='#' onclick=\"javascript: this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);\">删除</a></div>";
document.getElementById("slc").appendChild(div);
}
function toggle(ele) {
if (ele.style.display != "none")
ele.style.display = "none";
else
ele.style.display = "";
}
function showList(id, lnk) {
var node = document.getElementById("list" + id);
node.style.display = "";
lnk.onclick = function() { toggle(node); };
for (var i=0; i<nodes[id].childNodes.length; i++) {
node.innerHTML += "<div class='div4'><a onclick='javascript:addRecord("+id+","+i+");' href='#'>"+nodes[id].childNodes[i].getAttribute("name")+"</a></div>";
}
}
function checkSubmit(frm) {
var slc = document.getElementById("slc");
if (slc.childNodes.length == 0) {
alert("至少选择一个!");
return false;
}
var res = new Array();
for (var i=0; i<slc.childNodes.length; i++) {
var arr = slc.childNodes[i].getAttribute("id").split("_");
var str = nodes[parseInt(arr[1])].childNodes[parseInt(arr[2])].getAttribute("code");
str += "|";
str += nodes[parseInt(arr[1])].childNodes[parseInt(arr[2])].getAttribute("name");
res.push(str);
}
frm.selected.value = res.join(",");
return true;
}
</script>
</head>
<body>
    <div id="list">
      <script type="text/javascript">
for (var i=0; i<nodes.length; i++) {
document.write("<div class='div1'>");
document.write("  <div class='div2'><a href='#' onclick='javascript: showList(" + i + ", this)'>" + nodes[i].getAttribute("name") + "</a></div>");
document.write("  <div class='div3' style='display:none;' id='list" + i + "'></div>");
document.write("</div>");
}
      </script>
    </div>    <div id="slc"></div><div>
  <form action="do.asp" method="post" onsubmit="javascript: return checkSubmit(this);">
    <input type="hidden" value="" name="selected" />
    <input type="submit" value=" 提 交 " />
  </form>
</div>
</body>
</html>do.asp
<%
Response.Write Request.Form("selected")
%>

Answer 11

今天修改了一下～～<!-- 装数据的textarea -->
<textarea id="doc" style="display:none">
<?xml   version="1.0"   encoding="UTF-8"   standalone="yes"?> 
<root   code="root"> 
    <list   code="jiaoyu"   name="教育" > 
        <list   code="kaoyan"   name="考研" /> 
        <list   code="zhaosheng"   name="招生" /> 
        <list   code="peixun"   name="培训" /> 
    </list> 
    <list   code="xinwen"   name="新闻"> 
        <list   code="guonei"   name="国内" /> 
        <list   code="shehui"   name="社会" /> 
        <list   code="guoji"   name="国际" /> 
    </list> 
    <list   code="jiaoyu"   name="体育"> 
        <list   code="zuqiu"   name="足球" /> 
        <list   code="NBA"   name="NBA" /> 
        <list   code="wangqiu"   name="网球" /> 
    </list> 
</root>
</textarea>
<!-- 显示列表的层 -->
<div id="list"></div><!-- 显示删除按钮的层 -->
<div id="control"></div>
<script>
window.allChildrenNodes=[];
window.onload=function(){
    initList();
}
function initList(){
    /* 以文本形式获得要解析的xml文档 */
    var text=document.getElementById("doc").value;    /* 提取第一级list */
    var reg=/<list[^>]*>(?:(?!<\/list>)[\s\S])*<\/list>/g;
    var m=text.match(reg);
    for(var i=0,j=m.length;i<j;i++){
        var node=new ListNode(m[i],true);
        document.getElementById("list").appendChild(node.getHTMLElement());
    }
}/* ListNode数据类型,
2个参数 up是这个节点的脚本 hasChild是是否拥有子节点
例如up为 
    <list   code="jiaoyu"   name="体育"> 
        <list   code="zuqiu"   name="足球" /> 
        <list   code="NBA"   name="NBA" /> 
        <list   code="wangqiu"   name="网球" /> 
    </list> 
那么传进去后由这个对象进行解析，解析出code和name属性以及子节点
分别是_getCode();_getName();_getChildren() 3个函数
*/
function ListNode(up,hasChild){
    this.up=up;
    this.code=null;
    this.name=null;
    this._getCode();
    this._getName();
    if(hasChild){
        this.nodes=[];
        this._getChildren();
    }else{
        this.nodes=null ;
        this.selected=false;
        ListNode.allChildrenNodes.push(this);
    }
}/*
分析脚本，如：<list   code="jiaoyu"   name="体育"> 
获取其中的code和name属性
*/
ListNode.prototype._getCode=function(){
    var reg=/^<list\s(?:(?!code=|>).)*code\s?=\s?["']([^"'>]*)["'][^>]*>/;
    var m=this.up.match(reg);
    this.code=m[1];
}
ListNode.prototype._getName=function(text){
    var reg=/^<list\s(?:(?!name=|>).)*name\s?=\s?["']([^>]*)["'][^>]*>/;
    var m=this.up.match(reg);
    this.name=m[1];
}ListNode.prototype._getChildren=function(){
    var reg=/<list[^\/>]*\/>/g;
    var m=this.up.match(reg);
    for(var i=0,j=m.length;i<j;i++){
        var node=new ListNode(m[i],false);
        this.nodes.push(node);
    }
}/* 重写toString()函数 方便调试用的*/
ListNode.prototype.toString=function(){
    var str=[];
    str.push("Name:"+this.name+",");
    str.push("Code:"+this.code+"\n");
    if(this.nodes!=null){
        for(var i=0,j=this.nodes.length;i<j;i++){
            str.push("    "+this.nodes[i]);
        }
    }
    return str.join("");
}/* 子节点 如：篮球、NBA 的点击处理 */
ListNode.prototype.childrenClick=function(){
    this.selected=!this.selected;
    var allChildrenNodes=ListNode.allChildrenNodes;
    var html=[];
    for(var i=0,j=allChildrenNodes.length;i<j;i++){
        if(allChildrenNodes[i].selected){
            var tmp="delete.asp?code="+allChildrenNodes[i].code+"&name="+escape(allChildrenNodes[i].name);
            html.push("<ul>"+allChildrenNodes[i].name+"<a href='"+tmp+"'>【删除】<\/a></ul>");
        }
    }
    document.getElementById("control").innerHTML=html.join("");
}
ListNode.allChildrenNodes=[];
/* 标题节点 如：体育  的点击处理 */
ListNode.prototype.bodyClick=function(){
    var display=this._UI.childLayer.style.display;
    this._UI.childLayer.style.display=(display=="none"?"":"none");
}/* 把对象转化为html元素 */
ListNode.prototype.getHTMLElement=function(){
    var e;
    var listNode=this; 
    if(this.nodes==null){
        e=document.createElement("span");
        this._UI=e;
        e.className="childNode";
        e.innerHTML=this.name;
        e.onclick=function(){
            listNode.childrenClick();
        }
    }else{
        e=document.createElement("div");
        this._UI=e;
        e.className="listNode";
        e.bodyLayer=document.createElement("div");
        e.bodyLayer.innerHTML=this.name;
        e.bodyLayer.className="bodyLayer"
        e.childLayer=document.createElement("div");
        e.childLayer.style.display="none";
        e.childLayer.className="childLayer";
        for(var i=0,j=this.nodes.length;i<j;i++){
            e.childLayer.appendChild(this.nodes[i].getHTMLElement());
        }
        e.appendChild(e.bodyLayer);
        e.appendChild(e.childLayer);
        e.bodyLayer.onclick=function(){
            listNode.bodyClick();
        }
    }
    return e;
}</script>
<!-- 样式自己改，看颜色你就知道是哪个元素了 -->
<style>
#list{
    display:block;
    width:300px;
    heigth:auto;
}
#control{
    background-color:pink;
    display:block;
    width:300px;
    heigth:auto;
}
.listNode{}
.childNode{
    background-color:white;
    margin:10px;
}
.childLayer{
    background-color:black;
}
.bodyLayer{
    background-color:gold;
}
</style>

Answer 12

DataSource.xml:
<DataSource xmlns="http://tempuri.org/DataSource.xsd">
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>软件</v_GroupName>
<v_title>程序员</v_title>
</Data>
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>软件</v_GroupName>
<v_title>系统分析员</v_title>
</Data>
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>软件</v_GroupName>
<v_title>项目经理</v_title>
</Data>
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>硬件</v_GroupName>
<v_title>网络工程师</v_title>
</Data>
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>硬件</v_GroupName>
<v_title>计算机维护</v_title>
</Data>
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>数据库</v_GroupName>
<v_title>数据库开发</v_title>
</Data>
<Data>
<v_Source>计算机类</v_Source>
<v_GroupName>数据库</v_GroupName>
<v_title>数据库管理</v_title>
</Data>
<Data>
<v_Source>行政/管理类</v_Source>
<v_GroupName>行政</v_GroupName>
<v_title>文秘</v_title>
</Data>
<Data>
<v_Source>行政/管理类</v_Source>
<v_GroupName>行政</v_GroupName>
<v_title>助理</v_title>
</Data>
<Data>
<v_Source>行政/管理类</v_Source>
<v_GroupName>行政</v_GroupName>
<v_title>经理</v_title>
</Data>
<Data>
<v_Source>行政/管理类</v_Source>
<v_GroupName>管理</v_GroupName>
<v_title>总经理</v_title>
</Data>
<Data>
<v_Source>行政/管理类</v_Source>
<v_GroupName>管理</v_GroupName>
<v_title>部门经理</v_title>
</Data>
<Data>
<v_Source>行政/管理类</v_Source>
<v_GroupName>管理</v_GroupName>
<v_title>总监</v_title>
</Data>

</DataSource>
aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("DataSource.xml"));
for(int i = 0;i <ds.Tables[0].Rows.Count ;i++)
{
DataRow dr = ds.Tables[0].Rows[i];
Want.Text += String.Format("Group[Groupcount++] = new Array(\"{0}\",\"{1}\",\"{2}\");\n", dr["v_Source"],dr["v_GroupName"].ToString(), dr["v_title"].ToString());
if (SourceList1.Items.FindByText(dr["v_Source"].ToString()) == null)
{
SourceList1.Items.Add(dr["v_Source"].ToString());
}
}
}
}三个下拉框关联!
LZ一看就明白了!