js读取xml作为数据源填充四级联动下拉框

<?xml version="1.0" encoding="gb2312"?>
<item>
  <class display_name="法律">
     <class1 display_name="法律新闻">
         <class2 display_name="法制资讯">法制资讯</class2>
         <class2 display_name="社会与法">社会与法</class2>
         <class2 display_name="立法速递">立法速递</class2>
         <class2 display_name="法界">法界</class2>
         <class2 display_name="法律热点">法律热点</class2>
     </class1>
     <class1 display_name="案例">
         <class2 display_name="民法案例">
            <class3 display_name="婚姻法案例">婚姻法案例</class3>
            <class3 display_name="劳动法案例">劳动法案例</class3>
            <class3 display_name="保险法案例">保险法案例</class3>
            <class3 display_name="民事诉讼法案例">民事诉讼</class3>
            <class3 display_name="继承法案例">继承法案例</class3>
            <class3 display_name="义务教育法案例">义务教育法案例</class3>
            <class3 display_name="广告法案例">广告法案例</class3>
            <class3 display_name="消费者权益法案例">消费者权益法</class3>
            <class3 display_name=" 教育法案例">教育法</class3>
            <class3 display_name="环境法案例">环境法案例</class3>
            <class3 display_name="债券债务案例">债券债务案例</class3>
            <class3 display_name="人身权利案例">人身权利案例</class3>
            <class3 display_name="损害赔偿案例">损害赔偿案例</class3>
            <class3 display_name="其他民法案例">其他民法案例</class3>
         </class2>
         <class2 display_name="经济法案例">
            <class3 display_name="合同法案例">合同法</class3>
            <class3 display_name="公司法案例">公司法案例</class3>
           <class3 display_name="担保法案例">担保法案例</class3>
            <class3 display_name="电子商务法案例">电子商务法案例</class3>
            <class3 display_name="产品质量法案例">产品质量法案例</class3>
            <class3 display_name="房地产法案例">房地产法案例</class3>
           <class3 display_name="海商法案例">海商法案例</class3>
           <class3 display_name="物权法案例">物权法案例</class3>
           <class3 display_name="证券案例">证券案例</class3>
           <class3 display_name="票据法案例">票据法案例</class3>
           <class3 display_name="反垄断法案例">反垄断法案例</class3>
           <class3 display_name="金融法案例">金融法案例</class3>
           <class3 display_name="医疗纠纷案例">医疗纠纷案例</class3>
           <class3 display_name="土地管理法案例">土地管理法案例</class3>
           <class3 display_name="其他经济案例">其他经济案例</class3>
         </class2>
         <class2 display_name="刑法案例">刑法案例</class2>
         <class2 display_name="公益诉讼">公益诉讼</class2>
         <class2 display_name="知识产权案例">
            <class3 display_name="商标法案例">商标法案例</class3>
            <class3 display_name="专利法案例">专利法案例</class3>
            <class3 display_name="著作权法案例">著作权法案例</class3>
            <class3 display_name="反不正当竞争法案例">反不正当竞争法案例            </class3>
            <class3 display_name="其他知识产权法案例">其他知识产权法案例            </class3>
         </class2>
         <class2 display_name="行政法案例">
            <class3 display_name="治安管理处罚案例">治安管理处罚案例</class3>
            <class3 display_name="公务员法案例">公务员法案例</class3>
            <class3 display_name="行政诉讼法案例">行政诉讼法案例</class3>
            <class3 display_name="行政处罚案例">行政处罚案例</class3>
            <class3 display_name="行政许可案例">行政许可案例</class3>
            <class3 display_name="工商管理法">工商管理法</class3>
            <class3 display_name="其它行政案例">其它行政案例</class3>
         </class2>
         <class2 display_name="执行案例">执行案例</class2>
         <class2 display_name="国际法案例">国际法案例</class2>
         <class2 display_name="海事案例">海事案例</class2>
         <class2 display_name="监督案例">监督案例</class2>
         <class2 display_name="国际贸易法案例">国际贸易法案例</class2>
     </class1>
     <class1 display_name="指南">
         <class2 display_name="法律指南">法律指南</class2>
         <class2 display_name="实务指南">
           <class3 display_name="宪法">宪法</class3>
           <class3 display_name="刑法">刑法</class3>
           <class3 display_name="民法">民法</class3>
           <class3 display_name="行政法">行政法</class3>
           <class3 display_name="合同法">合同法</class3>
           <class3 display_name="物权法">物权法</class3>
           <class3 display_name="知识产权法">知识产权法</class3>
           <class3 display_name="公司法">公司法</class3>
           <class3 display_name="工商管理法">工商管理法</class3>
           <class3 display_name="税法">税法</class3>
           <class3 display_name="环保法">环保法</class3>
           <class3 display_name="道路安全法">道路安全法</class3>
           <class3 display_name="医疗卫生法">医疗卫生法</class3>
           <class3 display_name="房地产法">房地产法</class3>
           <class3 display_name="新闻出版法">新闻出版法</class3>
           <class3 display_name="宗教法">宗教法</class3>
           <class3 display_name="劳动法">劳动法</class3>
           <class3 display_name="婚姻法">婚姻法</class3>
           <class3 display_name="民事诉讼法">民事诉讼法</class3>
           <class3 display_name="行政诉讼法">行政诉讼法</class3>
           <class3 display_name="刑事诉讼法">刑事诉讼法</class3>
         </class2>
         <class2 display_name="司考指南">司考指南</class2>
         <class2 display_name="法律援助指南">法律援助指南</class2>
         <class2 display_name="公正指南">公正指南</class2>
         <class2 display_name="诉讼指南">
             <class3 display_name="民事">民事</class3>
             <class3 display_name="刑事">刑事</class3>
             <class3 display_name="行政">行政</class3>
             <class3 display_name="劳动">劳动</class3>
         </class2>
     </class1>
     <class1 display_name="官场">
         <class2 display_name="官场新闻">官场新闻</class2>
         <class2 display_name="反腐行动">反腐行动</class2>
         <class2 display_name="官场文化">官场文化</class2>
         <class2 display_name="管路">管路</class2>
         <class2 display_name="官场趣事">官场趣事</class2>
     </class1>
    <class1 display_name="人物">
         <class2 display_name="法律人物">法律人物</class2>
         <class2 display_name="焦点人物">焦点人物</class2>
         <class2 display_name="人物点评"></class2>
    </class1>
    <class1 display_name="民生">
        <class2 display_name="民生快讯">民生快讯</class2>
        <class2 display_name="民生故事">民生故事</class2>
        <class2 display_name="民生与法">民生与法</class2>
        <class2 display_name="民生评谈">民生评谈</class2>
    </class1>
  </class>
  <class display_name="商业">
     <class1 display_name="培训">
        <class2 display_name="司考">
           <class3 display_name="司考指南">司考指南</class3>
           <class3 display_name="司考辅导">司考辅导</class3>
           <class3 display_name="司法培训">司法培训</class3>
           <class3 display_name="司考心得">司考心得</class3>
           <class3 display_name="司考成绩查询">司考成绩查询</class3>
           <class3 display_name="司考书店">司考书店</class3>
        </class2>
        <class2 display_name="考研">
           <class3 display_name="考研培训">考研培训</class3>
           <class3 display_name="报考指南">报考指南</class3>
           <class3 display_name="考研资讯">考研资讯</class3>
           <class3 display_name="考研心得">考研心得</class3>
           <class3 display_name="研招院校">研招院校</class3>
           <class3 display_name="考研书店">考研书店</class3>
        </class2>
        <class2 display_name="英语">
            <class3 display_name="英语学习">英语学习</class3>
            <class3 display_name="英语培训">英语培训</class3>
            <class3 display_name="资源技巧">资源技巧</class3>
            <class3 display_name="考试指南">考试指南</class3>
            <class3 display_name="英语书店">英语书店</class3>
        </class2>
     </class1>
     <class1 display_name="招聘求职">
           <class2 display_name="最新职位">最新职位</class2>
           <class2 display_name="发布求职">发布求职</class2>
           <class2 display_name="发布招聘">发布招聘</class2>
           <class2 display_name="简历管理">简历管理</class2>
            <class2 display_name="热门职位">热门职位</class2>
           <class2 display_name="应聘技巧">应聘技巧</class2>
           <class2 display_name="职位搜索">职位搜索</class2>
           <class2 display_name="人才中心">人才中心</class2>
           <class2 display_name="招聘会">招聘会</class2>
    </class1>
    <class1 display_name="投资">
          <class2 display_name="投资项目">投资项目</class2>
          <class2 display_name="股票">股票</class2>
          <class2 display_name="房产">房产</class2>
          <class2 display_name="投资指南">投资指南</class2>
          <class2 display_name="成功事例">成功事例</class2>
          <class2 display_name="市场动态">市场动态</class2>
    </class1>
    <class1 display_name="合作">
          <class2 display_name="合作伙伴">合作伙伴</class2>
           <class2 display_name="合作协议">合作协议</class2>
    </class1>
    <class1 display_name="网络办公">
         <class2 display_name="在线报名">在线报名</class2>
         <class2 display_name="在线咨询">在线咨询</class2>
         <class2 display_name="网络办公软件">网络办公软件</class2>
         <class2 display_name="网络办公应用教程">网络办公应用教程</class2>
    </class1>
    <class1 display_name="信用">
        <class2 display_name="企业">企业</class2>
        <class2 display_name="律师">律师</class2>
        <class2 display_name="会员">会员</class2>
    </class1>
  </class>
  <class display_name="实务">
    <class1 display_name="咨询">
      <class2 display_name="我要咨询">我要咨询</class2>
      <class2 display_name="我要回答">我要回答</class2>
      <class2 display_name="查找我的咨询">查找我的咨询</class2>
      <class2 display_name="常见问题">常见问题</class2>
      <class2 display_name="咨询说明">咨询说明</class2>
      <class2 display_name="最新咨询">最新咨询</class2>
      <class2 display_name="咨询排行榜"></class2>
    </class1>
    <class1 display_name="委托">
      <class2 display_name="案件委托">案件委托</class2>
      <class2 display_name="最新委托">最新委托</class2>
      <class2 display_name="成功委托">成功委托</class2>
      <class2 display_name="律师库">律师库</class2>
      <class2 display_name="律师服务收费标准">律师服务收费标准</class2>
      <class2 display_name="发布委托">发布委托</class2>
      <class2 display_name="合同攥写">合同攥写</class2>
      <class2 display_name="委托指南">委托指南</class2>
    </class1>
    <class1 display="查询">
      <class2 display_name="法律法规查询">法律法规查询</class2>
    </class1>
    <class1 display_name="文书">
       <class2 display_name="文书的分类">
         <class3 display_name="民事诉讼文书">民事诉讼文书</class3>
         <class3 display_name="刑事诉讼文书">刑事诉讼文书</class3>
         <class3 display_name="行政诉讼文书">行政诉讼文书</class3>
         <class3 display_name="非诉讼文书">非诉讼文书</class3>
         <class3 display_name="仲裁法律文书">仲裁法律文书</class3>
         <class3 display_name="其它法律文书">其它法律文书</class3>
       </class2>
       <class2 display_name="文书搜索">文书搜索</class2>
       <class2 display_name="文书生成">文书生成</class2>
       <class2 display_name="文书技巧">文书技巧</class2>
    </class1>
    <class1 display_name="合同">
       <class2 display_name="合同范本">
            <class3 display_name="买卖合同范本">买卖合同范本</class3>
            <class3 display_name="借款合同范本">借款合同范本</class3>
            <class3 display_name="租赁合同范本">租赁合同范本</class3>
            <class3 display_name="承揽合同范本">承揽合同范本</class3>
            <class3 display_name="运输合同范本">运输合同范本</class3>
            <class3 display_name="建筑工程合同范本">建筑工程合同范本</class3>
            <class3 display_name="劳动合同范本">劳动合同范本</class3>
            <class3 display_name="知识产权合同范本">知识产权合同范本</class3>
            <class3 display_name="技术合同范本">技术合同范本</class3>
            <class3 display_name="投资合同范本">投资合同范本</class3>
            <class3 display_name="招标合同范本">招标合同范本</class3>
            <class3 display_name="证券合同范本">证券合同范本</class3>
            <class3 display_name="其它合同范本">其它合同范本</class3>
       </class2>
       <class2 display_name="生成合同">生成合同</class2>
    </class1>
    <class1 display_name="公示">
      <class2 display_name="最新公示">最新公示</class2>
      <class2 display_name="法律人公示">法律人公示</class2>
      <class2 display_name="公示制度">公示制度</class2>
    </class1>
    <class1 display_name="合作">
      <class2 display_name="合作办公">合作办公</class2>
      <class2 display_name="合作调查">合作调查</class2>
      <class2 display_name="合作取证">合作取证</class2>
    </class1>
  </class>
  <class display_name="时事">
    <class1 display_name="国际">
       <class2 display_name="最新动态">最新动态</class2>
       <class2 display_name="热点专题">热点专题</class2>
       <class2 display_name="时事圈点">时事圈点</class2>
        <class2 display_name="精彩图片">精彩图片</class2>
    </class1>
    <class1 display_name="国内">
        <class2 display_name="最新动态">最新动态</class2>
        <class2 display_name="热点专题">热点专题</class2>
        <class2 display_name="时事圈点">时事圈点</class2>
        <class2 display_name="精彩图片">精彩图片</class2>
    </class1>
    <class1 display_name="热点">
       <class2 display_name="热点播报">热点播报</class2>
       <class2 display_name="法律热点播报">法律热点播报</class2>
       <class2 display_name="热点法律书库">热点法律书库</class2>
       <class2 display_name="法律热点问题论文">法律热点问题论文</class2>
    </class1>
    <class1 display_name="深度">
      <class2 display_name="法律法规深度汇总">法律法规深度汇总</class2>
      <class2 display_name="人物透视">人物透视</class2>
      <class2 display_name="深度解读">深度解读</class2>
    </class1>
    <class1 display_name="图片">
       <class2 display_name="律师风采">律师风采</class2>
       <class2 display_name="法制图片">法制图片</class2>
       <class2 display_name="新闻大全">新闻大全</class2>
       <class2 display_name="图片解说">图片解说</class2>
    </class1>
    <class1 display_name="视频">
      <class2 display_name="法律视频">法律视频</class2>
      <class2 display_name="时政要闻">时政要闻</class2>
      <class2 display_name="主题视频">专题视频</class2>
      <class2 display_name="时事回顾">时事回顾</class2>
      <class2 display_name="专家讲座">专家讲座</class2>
    </class1>
  </class>
  <class display_name="交流">
    <class1 display_name="博客">博客</class1>
    <class1 display_name="圈子">圈子</class1>
    <class1 display_name="沙龙">
      <class2 display_name="主题沙龙">主题沙龙</class2>
      <class2 display_name="法律沙龙">法律沙龙</class2>
      <class2 display_name="炒股沙龙">炒股沙龙</class2>
      <class2 display_name="英语沙龙">英语沙龙</class2>
      <class2 display_name="娱乐沙龙">娱乐沙龙</class2>
    </class1>
    <class1 display_name="DV">
      <class2 display_name="最新DV">最新DV</class2>
      <class2 display_name="个人DV">个人DV</class2>
      <class2 display_name="活动DV">活动DV</class2>
    </class1>
    <class1 display_name="图片">
      <class2 display_name="最新图片">最新图片</class2>
      <class2 display_name="新闻图片">新闻图片</class2>
      <class2 display_name="人物">人物</class2>
      <class2 display_name="图表漫画">图表漫画</class2>
      <class2 display_name="趣图">趣图</class2>
      <class2 display_name="老照片">老照片</class2>
    </class1>
  </class>
  <class display_name="学术">
     <class1 display_name="论文">
        <class2 display_name="论文展示">论文展示</class2>
        <class2 display_name="论文攥写">论文攥写</class2>
        <class2 display_name="书评">书评</class2>
        <class2 display_name="特别推荐">特别推荐</class2>
        <class2 display_name="外文原文">外文原文</class2>
     </class1>
     <class1 display_name="专著">
        <class2 display_name="最新专著">最新专著</class2>
        <class2 display_name="专著推荐">专著推荐</class2>
        <class2 display_name="专著评论">专著评论</class2>
     </class1>
     <class1 display_name="文集">
        <class2 display_name="文集搜索">文集搜索</class2>
        <class2 display_name="文集展示">文集展示</class2>
        <class2 display_name="最新法律文集">最新法律文集</class2>
        <class2 display_name="文集评论">文集评论</class2>
     </class1>
     <class1 display_name="人物">
         <class2 display_name="访谈">访谈</class2>
         <class2 display_name="人物传奇">人物传奇</class2>
     </class1>
     <class1 display_name="历史">
          <class2 display_name="尘封档案">尘封档案</class2>
          <class2 display_name="古今法律对比">古今法律对比</class2>
     </class1>
  </class>
  <class display_name="文化">
     <class1 display_name="文学">
        <class2 display_name="文学动态">文学动态</class2>
        <class2 display_name="文学作品展示">文学作品展示</class2>
        <class2 display_name="文学探讨">文学探讨</class2>
        <class2 display_name="文人文事"></class2>
     </class1>
     <class1 display_name="书画">
        <class2 display_name="书画动态">书画动态</class2>
        <class2 display_name="书画作品展示">书画作品展示</class2>
        <class2 display_name="书画大家">书画大家</class2>
        <class2 display_name="书画市场">书画市场</class2>
     </class1>
     <class1 display_name="收藏">
        <class2 display_name="收藏作品">收藏作品</class2>
        <class2 display_name="收藏心得">收藏心得</class2>
        <class2 display_name="收藏资讯">收藏资讯</class2>
        <class2 display_name="收藏热点">收藏热点</class2>
     </class1>
     <class1 display_name="合作伙伴">
        <class2 display_name="最新作品">最新作品</class2>
     </class1>
  </class>
  <class display_name="休闲">
    <class1 display_name="时尚">
       <class2 display_name="美容">美容</class2>
       <class2 display_name="奢品">奢品</class2>
       <class2 display_name="家居">家居</class2>
       <class2 display_name="生活">生活</class2>
       <class2 display_name="情感">情感</class2>
       <class2 display_name="时尚人物">时尚人物</class2>
       <class2 display_name="笑话">笑话</class2>
       <class2 display_name="法律分析">法律分析</class2>
    </class1>
    <class1 display_name="汽车">
        <class2 display_name="汽车信息">汽车信息</class2>
        <class2 display_name="汽车新闻">汽车新闻</class2>
        <class2 display_name="汽车展">汽车展</class2>
        <class2 display_name="法律分析">法律分析</class2>
    </class1>
    <class1 display_name="饮食">
       <class2 display_name="饮食新闻">饮食新闻</class2>
       <class2 display_name="饮食健康">饮食健康</class2>
       <class2 display_name="饮食文化">饮食文化</class2>
       <class2 display_name="烹饪技巧">烹饪技巧</class2>
       <class2 display_name="法律分析">法律分析</class2>
    </class1>
    <class1 display_name="服饰">
       <class2 display_name="服装展">服装展</class2>
       <class2 display_name="服饰特色">服饰特色</class2>
       <class2 display_name="着装技巧">着装技巧</class2>
       <class2 display_name="民族服饰">民族服饰</class2>
       <class2 display_name="设计前沿">设计前沿</class2>
       <class2 display_name="法律分析">法律分析</class2>
    </class1>
    <class1 display_name="美女">
       <class2 display_name="今日推荐">今日推荐</class2>
       <class2 display_name="写真">写真</class2>
       <class2 display_name="化妆">化妆</class2>
       <class2 display_name="视频">视频</class2>
       <class2 display_name="靓丽车模">靓丽车模</class2>
       <class2 display_name="法律分析">法律分析</class2>
    </class1>
  </class>
 
</item>

<html>
<head>
  <script type="text/javascript">
    var orderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
    orderDoc.load("columns.xml");
    var sortField=orderDoc.selectNodes("/item/class");
    function chooseclass()
    {
      for(var i=0;i<sortField.length;i++)
      {
        var ooption=document.createElement("option");
        var prov=sortField[i].getAttribute("display_name");
        ooption.text=""+prov+"";
        ooption.value=prov;
        var classid=document.getElementById("selclass");
        classid.add(ooption);
      }
      chooseclass1();
    }
    function chooseclass1()
   {
     var index=document.form1.selclass.selectedIndex;
     document.form1.selclass1.length=0;
     var selectedclass1=sortField[index];
     for(var i=0;i<selectedclass1.childNodes.length;i++)
    {
     var ooption=document.createElement("option");
     var class1=selectedclass1.childNodes[i].getAttribute("display_name");
     ooption.text=""+class1+"";
     ooption.value=class1;
     var class1id=document.getElementById("selclass1");
     class1id.add(ooption);
    }
     chooseclass2();
   }
   function chooseclass2()
   {
      //var classid=document.getElementById("selclass");
     // var indexclass=classid.selectedIndex;
      //var class1id=document.getElementById("selclass1");
     // var indexclass1=class1id.selectedIndex;
     var class2id=document.getElementById("selclass2");
     // class2id.lenght=0;
      var indexclass=document.form1.selclass.selectedIndex;
      var indexclass1=document.form1.selclass1.selectedIndex;
      document.form1.selclass2.length=0;
      var selectedclass1=sortField[indexclass];
      var selectedclass2=selectedclass1.childNodes[indexclass1];
      for(var i=0;i<selectedclass2.childNodes.length;i++)
       {
         var ooption=document.createElement("option");
         var class2=selectedclass2.childNodes[i].getAttribute("display_name");
         ooption.text=""+class2+"";
         ooption.value=class2;
         class2id.add(ooption);
       }
       chooseclass3();
   }
   function chooseclass3()
   {
     var indexclass=document.form1.selclass.selectedIndex;
     var indexclass1=document.form1.selclass1.selectedIndex;
     var indexclass2=document.form1.selclass2.selectedIndex;
     var class3id=document.getElementById("selclass3");
     document.form1.selclass3.length=0;
     var selectedclass1=sortField[indexclass];
     var selectedclass2=selectedclass1.childNodes[indexclass1];
     var selectedcalss3=selectedclass2.childNodes[indexclass2];
     for(var i=0;i<selectedcalss3.childNodes.length;i++)
     {
        var ooption=document.createElement("option");
        var class3=selectedcalss3.childNodes[i].getAttribute("display_name");
        ooption.text=""+class3+"";
        ooption.value=class3;
        class3id.add(ooption);
     }
   }
  
  </script>
 
</head>
<body onLoad="chooseclass();chooseclass1(); chooseclass2()">
   <form action="" menthod="post" id="form1" name="form1">
    <select name="selclass" id="selclass" onChange="chooseclass1()">
    </select>
    <select name="selclass1" id="selclass1" onChange="chooseclass2()">
    </select>
    <select name="selclass2" id="selclass2" onChange="chooseclass3()">
    </select>
    <select name="selclass3" id="selclass3">
    </select>
   </form>
</body>
</html>