JS调用XML绑定select(原创)

这个个东西花了我1个多小时,终于搞定,很兴奋啊
代码奉上:
XML:
<?xml version="1.0" encoding="utf-8" ?>
<joblist>
  <job>
    <id value="1"/>
    <jobname value="--IT,计算机行业--"/>
    <fid value="0"/>
  </job>
  <job>
    <id value="2"/>
    <jobname value="程序员"/>
    <fid value="1"/>
  </job>
  <job>
    <id value="3"/>
    <jobname value="网管"/>
    <fid value="1"/>
  </job>
  <job>
    <id value="4"/>
    <jobname value="网页设计"/>
    <fid value="1"/>
  </job>
  <job>
    <id value="5"/>
    <jobname value="--服务性行业--"/>
    <fid value="0"/>
  </job>
  <job>
    <id value="6"/>
    <jobname value="礼仪小姐"/>
    <fid value="5"/>
  </job>
  <job>
    <id value="7"/>
    <jobname value="服务生"/>
    <fid value="5"/>
  </job>
  <job>
    <id value="8"/>
    <jobname value="服务员"/>
    <fid value="5"/>
  </job>
</joblist>

JS:
//XML文档对象
    var xmlDoc;
    //载入XML文档
    function loadxmlDocument(docName)  
      {  
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
      xmlDoc.async = false;  
      xmlDoc.validateOnParse = false;  
      xmlDoc.load(docName);  
      if(xmlDoc.parseError.errorCode   !=   0)   {  
      alert(showError(xmlDoc));  
      return(false);  
      }  
      return(xmlDoc);  
      }
      //调用数据
      function startload()
        {
          var option,id,jobname,fid;
          xmlDoc = loadxmlDocument("XMLDoc/job.xml");
          if(xmlDoc == null)
          {
              alert('您的浏览器不支持xml文件读取!请使用IE版本');
          }
          else
          {
              clearList();
              var DeptXML = xmlDoc.getElementsByTagName("job");
              //alert(DeptXML.length); 
              for (var i = 0 ; i < DeptXML.length ; i ++ )
              {
                  id = DeptXML[i].childNodes[0].getAttribute("value");
                  jobname = DeptXML[i].childNodes[1].getAttribute("value");
                  fid = DeptXML[i].childNodes[2].getAttribute("value");
//                  option = new Option(jobname,jobname);
//                  document.getElementById("sel1").add(option);
                  //二级分类
                  if (fid == "0")
                  {
                      option = new Option(jobname,jobname);
                      document.getElementById("sel1").add(option);
                      for (var j=0;j<DeptXML.length;j++)
                      {
                          if (DeptXML[j].childNodes[2].getAttribute("value") == id)
                          {
                              option = new Option(DeptXML[j].childNodes[1].getAttribute("value"),DeptXML[j].childNodes[1].getAttribute("value"));
                              document.getElementById("sel1").add(option);
                          }
                      }
                  }
              }
          }
        }
       
        function clearList()
        {
            var select1 = document.getElementById("sel1");
            while (select1.childNodes.length >0)
            {
                select1.removeChild(select1.childNodes[0]);
            }
        }
 
HTML:
加载时候绑定数据
<body onload="startload()">
    <form id="form1" runat="server">
    <div>
    <select id="sel1" name="sel1" multiple="multiple">
    </select>
    </div>
    </form>
</body>
原文地址:https://www.cnblogs.com/weichao975/p/2022563.html