javascript动态创建连动的select和checkbox

1.利用xml做数据源

class.xml内容如下

<?xml version=”1.0″ encoding=”gb2312″?>
<root>
<lists>
<biglist>基础护肤产品</biglist>
<list>美白产品</list>
<list>抗皱产品</list>
<list>防晒用品</list>
<list>祛斑除痘</list>
<list>保湿护理</list>
<list>洁肤产品</list>
<list>眼部护理</list>
<list>精华素</list>
<list>面膜</list>
</lists>
<lists>
<biglist>彩妆用品用具</biglist>
<list>唇部彩妆</list>
<list>眼部彩妆</list>
<list>面部彩妆</list>
<list>彩妆用具</list>
</lists>
<lists>
<biglist>功效型化妆品</biglist>
<list>抗敏用品</list>
<list>脱毛脱色用品</list>
<list>消疤用品</list>
<list>抑汗祛臭用品</list>
</lists>
<lists>
<biglist>沐足沐浴用品</biglist>
</lists>
<lists>
<biglist>减肥塑身</biglist>
<list>减肥产品</list>
<list>塑身仪器</list>
</lists>
<lists>
<biglist>其他</biglist>
</lists>
</root>

<script language=”javascript”>
 
/***************创建xml对象*******************/
function createXmlDom(){
 if (window.ActiveXObject){
  var arrIE=[“MSXML2.DOMDocument.5.0″,”MSXML2.DOMDocument.4.0”,
       “MSXML2.DOMDocument.3.0″,”MSXML2.DOMDocument”,
       “Microsoft.XMLDOM”];
  for(var i=0;i<arrIE.length;i++){
   try{
    var xmlDom=new ActiveXObject(arrIE[i]);
    return xmlDom;
   }
   catch(oError){}
   throw new Error(“MSXML is not installed onyour system”);
  }
 }
 else if (document.implementation.createDocument){//Mozilla, Firefox, Opera, etc.
  var xmlDom=document.implementation.createDocument(“”,””,null);
  return xmlDom;
 }
 
}
 
/**************得到xml文档对象的DOM***************/
function getXml(filename){
 var xmlDoc=null;
 if (window.ActiveXObject){//ie
  xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
 }
 else if (document.implementation.createDocument){//Mozilla, Firefox, Opera, etc.
  xmlDoc=document.implementation.createDocument(“”,””,null);
 }
 xmlDoc.async=false;
 xmlDoc.load(filename);
 return xmlDoc;
}
 
 
//绑定下拉列表，通常是第一级分类
function bindSelect(){
 var op;
 //alert(“hi”);
 for(var i=0;i<nodes.length;i++){
  var province=nodes[i].getElementsByTagName(“biglist”)[0].firstChild.data;
  
  op=document.createElement(“option”);
  op.setAttribute(“text”,province);
  op.setAttribute(“value”,i);
  op.innerHTML=province;
  //alert(op.getAttribute(“vales”));
  document.getElementById(“firsttype”).appendChild(op);
 } 
}
 
//绑定checkbox通过是第二级分类
function bindCheckBox(bigID){
 var citys=nodes[bigID].getElementsByTagName(“list”);
 var chk,sp;
 var parent=document.getElementById(“small”);
 parent.innerHTML=””;
 for(var i=0;i<citys.length;i++){
  chk=document.createElement(“input”);
  chk.type=”checkbox”;
  chk.name=”secondtype[]”;
  chk.id=”secondtype”+i;
  chk.value=i;
  
  sp=document.createElement(“span”);
  sp.innerHTML=citys[i].firstChild.data+” “;
  
  parent.appendChild(chk);
  parent.appendChild(sp);
 }
}
 
 
var xmlDoc=getXml(“class.xml”);
 
var nodes=xmlDoc.documentElement.getElementsByTagName(“lists”);
 
bindCheckBox(0); //页面加载后默认显示第一个下拉列表类别的子类
window.onload=function(){
 bindSelect();
 //bindCheckBox(0);
 document.getElementById(“firsttype”).onchange=function(){
  bindCheckBox(this.selectedIndex);
 }
 
}
 
</script>