今天需要遇到添加商品的某一类型的时候，原来的类型只有一个下拉框，虽然下拉框有层次缩进，但太长了，很不好使用，于是，想有这么一个处理:

1）首先生成根类的下拉框
2）选择某一个父类的时候，随后生成一个其子类的下拉框，如果有子类的子类（即孙子），不列出它们。
3）以此类推

完成以上功能的话，非JavaScript莫属了。

这里有一个难点，如果处理好只能生成当前父类的子类（如果存在的话），而且不能重复生成子类的下拉框（select）。变化到同级中的另一个父类的时候，之前父类的子类（还有由点击子类生成的其子类（即孙子类）的下拉框，再类推以下几级），都要消失，而是生成当前指向的父类的子类。

说得乱七八糟的吧。其实，也简单，我们要处理的是，当前某层类位置以后东东，我们需要一个东西记录这些东东，以便选择同层中另一个类时候的删除它们，插进该类的子类。

以上也只是自己想得处理这问题的一个方法，当前能力还非常有待提高，所以很期待高人指点。下边贴出代码，JavaScript好些东西是用于致学（即是用的时候，查看了下参考手册，很多东西没了解，用的比较生硬），还有，以下只支持IE，非常郁闷！其它浏览器不支持Event对象的srcElement属性哦！

类别的XML文档category.xml

HTML DOM:

处理xml并生成category的select菜单的JavaScript：xml_category.js

/**
 * @param   xml_name     xml文档的路径
 * @param   target_id      html的DOM的ID
 */
function xml_category(xml_name, target_id)
{
  var self = this;             // 私有变量，指向对象本身，在JS“类”的封装和访问机制，理解还有待加强。
  
   this.xmlDoc       = loadXMLDoc(xml_name)        // loadXMLDoc函数见/?p=302
   this.targetID     = document.getElementByID(target_id);
   this.catTree      = new Array();                       // 记录select的情况

   /**
    *  产生select下拉框
    */
   this.createSelect = function(parent_id)
   {
      var xmlDoc = self.xmlDoc;
      var cat, cat_num;

      // 以下为了都兼容各浏览器，不使用用与IE的XML DOM的selectNodes() 方法用一个 XPath（//cat[pid=*])[*表传来对应的parent_id] 查询选择节点.其它浏览器可参考Document.evaluate()。
      cat = xmlDoc.getElementByTagName("cat");
      cat_num = parseInt(cat.length);
     
      if (cat_num > 0) // 类别存在
      {
         var slt;
         var is_set = false;                                            // 为标志该层是否有类别，即有option选项
         slt = document.createElement("SELECT")              // 创建一个select元素节点
         slt.onchange = self.createChildSelect;                 // onchange事件

         // 每次都是整树遍历啊！ !--
         for (var i=0, j=0; i < cat_num; i++)
         {
            // 同层的类别
            if (parseInt(cat[i].getAttribute("pid")) === parseInt(parent_id))
            {
               // option选项
               slt.optons[j] = new Option(cat[i].childNodes[0].nodeValue, cat[i].getAttribute("id"));
               is_set = true;
               j++; 
            }
         }

         // 有选项值
         if (is_set)
         {
             self.catTree.push(slt);          // 记录这个select下拉框
             self.targetID.appendChild(slt);
         }
         else
         {
            slt = null;
         }

      }
   }

   /** 
    * 生成子类
    */
  this.createChildSelect = function()
  {
       var slt_len = self.catTree.length;
       
       if (slt_len > 0)
       {
            var s = 0;                     // 标记当前触发option在catTree的位置（如果存在的情况）

            // 很不顺眼的遍历
            for (var i=0; i < slt_len; i++)
            { 
                // srcElement是IE的属性。 !--
                if (self.catTree[i] == event.srcElement)
                {
                    s = i ; break;
                }
            }

            // 删除该层位置以后所有的东东
            for (var i= slt_len - 1; i > s; i--)
            {
                 self.targetID.removeChild(self.catTree[i]);
                 seft.catTree.pop();
             }

            self.createSelect(event.srcElement.value);
       }

  }

｝

下来在之前HTML文档位于id=”cat”写下如下JS，便可实现了：

var xml = xml_category("xml_category.xml", "cat")
xml.createSelect(0);

以上处理，还非常欠缺灵活性，就是初始化这个select下拉框的时候，如果输入的parent_id不是根类的ID，而是子类，或以下几层的子类的ID的时候，不能生成相应的select下拉框。

到此，写下这点记录，希望高人指点，也继续更进~