zoukankan      html  css  js  c++  java
  • 龙的传人——xml_javascript三级联动

    现在在网上看到的三级联一般都是连接数据库或,用javascript数组做的三级联动,我觉得数据没这个必要,有点杀鸡有牛刀的感觉,修改不方便。javascript数组对一般初学者来说不是那么容易看得懂,而且修改不方便,xml是一个不错的选择一目睹了然,随便增加删除十分方便!
    ProvinceCity.xml
    <?xml version="1.0" encoding="utf-8"?>
    <Root> 
      <Province Name="北京市" Id="110000">
        <City Name="市辖区" Id="110100">
          <Area Name="东城区" Id="110101" />
          <Area Name="西城区" Id="110102" />
          <Area Name="崇文区" Id="110103" />
          <Area Name="宣武区" Id="110104" />
          <Area Name="朝阳区" Id="110105" />
          <Area Name="丰台区" Id="110106" />
          <Area Name="石景山区" Id="110107" />
          <Area Name="海淀区" Id="110108" />
          <Area Name="门头沟区" Id="110109" />
          <Area Name="房山区" Id="110111" />
          <Area Name="通州区" Id="110112" />
          <Area Name="顺义区" Id="110113" />
          <Area Name="昌平区" Id="110114" />
          <Area Name="大兴区" Id="110115" />
          <Area Name="怀柔区" Id="110116" />
          <Area Name="平谷区" Id="110117" />
        </City>
        <City Name="县" Id="110200">
          <Area Name="密云县" Id="110228" />
          <Area Name="延庆县" Id="110229" />
        </City>
      </Province>
      <Province Name="天津市" Id="120000">
        <City Name="市辖区" Id="120100">
          <Area Name="和平区" Id="120101" />
          <Area Name="河东区" Id="120102" />
          <Area Name="河西区" Id="120103" />
          <Area Name="南开区" Id="120104" />
          <Area Name="河北区" Id="120105" />
          <Area Name="红桥区" Id="120106" />
          <Area Name="塘沽区" Id="120107" />
          <Area Name="汉沽区" Id="120108" />
          <Area Name="大港区" Id="120109" />
          <Area Name="东丽区" Id="120110" />
          <Area Name="西青区" Id="120111" />
          <Area Name="津南区" Id="120112" />
          <Area Name="北辰区" Id="120113" />
          <Area Name="武清区" Id="120114" />
          <Area Name="宝坻区" Id="120115" />
        </City>
        <City Name="县" Id="120200">
          <Area Name="宁河县" Id="120221" />
          <Area Name="静海县" Id="120223" />
          <Area Name="蓟 县" Id="120225" />
        </City>
    ..........
    ........
    ........
    </Province>
    <Root> 
    <script language="javascript" type="text/javascript">
    var xmlDoc;
    var nodeIndex;
    function getxmlDoc()
    {
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        var currNode;
        xmlDoc.async=false;
        xmlDoc.load("ProvinceCity.xml");
        if(xmlDoc.parseError.errorCode!=0)
        {
            var myErr=xmlDoc.parseError;
            alert("出错!"+myErr.reason);
        }   
        getProvince1();
    }
    function getProvince1()
    {
        var nodeList=xmlDoc.selectSingleNode("Root").childNodes;
        var dropElement=document.getElementById("Select1");    
        for(var i=0; i<nodeList.length; i++)
        {
            var provinceNode=nodeList[i]; 
            var eOption=document.createElement("option");
            eOption.value=provinceNode.getAttribute("Id");
            eOption.text=provinceNode.getAttribute("Name");
            dropElement.add(eOption);     
        }
    }
    function selectCity1()
    {
        var dropElement=document.getElementById("Select1");
        var id=dropElement.options[dropElement.selectedIndex].value;
        var provinceNode=xmlDoc.selectSingleNode("//Root/Province[@Id="+id+"]");
        var city=document.getElementById("Select2"); 
        var area=document.getElementById("Select3"); 
        RemoveDropDownList(city);
        RemoveDropDownList(area);
        for(var i=0; i<provinceNode.childNodes.length; i++)
        {
            var cityNode=provinceNode.childNodes[i];
            var eOption=document.createElement("option");
            eOption.value=cityNode.getAttribute("Id");
            eOption.text=cityNode.getAttribute("Name");
            city.add(eOption);
        }
    }
    function selectArea1()
    {
        var dropElement=document.getElementById("Select2");
        var id=dropElement.options[dropElement.selectedIndex].value;
        var provinceNode=xmlDoc.selectSingleNode("//Root/Province/City[@Id="+id+"]");
        var area=document.getElementById("Select3"); 
        RemoveDropDownList(area);
        for(var i=0; i<provinceNode.childNodes.length; i++)
        {
            var cityNode=provinceNode.childNodes[i];
            var eOption=document.createElement("option");
            eOption.value=cityNode.getAttribute("Id");
            eOption.text=cityNode.getAttribute("Name");
            area.add(eOption);
        }
    }
    function RemoveDropDownList(obj)
    {
        var len=obj.options.length;
        //alert(len);
        for(var i=len;i>=0;i--)
        {
            obj.remove(i);
        }
       
    }
    </script>
    演示:http://home.goofar.com/lkc311/XmlDropDownlist.htm
  • 相关阅读:
    从零开始入门 K8s | 应用编排与管理
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    203. Remove Linked List Elements
    183. Customers Who Never Order
    182. Duplicate Emails
    181. Employees Earning More Than Their Managers
    1261. Find Elements in a Contaminated Binary Tree
    1260. Shift 2D Grid
  • 原文地址:https://www.cnblogs.com/jacklong/p/397604.html
Copyright © 2011-2022 走看看