世界地区选择

选用的是qq LocList.xml数据
我的是在 E:\qq\I18N\2052
qq安装目录不同 2052目录下面的LocList.xml文件 引入即可

国家-省/州-市/区选择
html

                        <select id="country" class="select120" name="end_country">

                        </select>

                        <select class="select120" id="state" name="end_province">

                        </select>

                        <select class="select120" id="city" name="end_city">

                        </select>

js

<script type="text/javascript">

      //注意事项
      //有的国家是没有state的只有city

      //1.xml读取方法 兼容主流浏览器
      var loadXML = function (xmlFile) {
        var xmlDoc;
        if (window.ActiveXObject) {
          xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
          xmlDoc.async = false;
          xmlDoc.load(xmlFile);
        }
        else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //火狐浏览器
          xmlDoc = document.implementation.createDocument('', '', null);
          xmlDoc.load(xmlFile);
        }
        else
        {
          var xmlhttp = new window.XMLHttpRequest();
          xmlhttp.open("GET", xmlFile, false);
          xmlhttp.send(null);
          if (xmlhttp.readyState == 4) {
            xmlDoc = xmlhttp.responseXML.documentElement;
          }
        }
        return xmlDoc;
      }


      //2. 获取select，初始化
      var countrySelectObj = document.getElementById("country");
      var stateSelectObj = document.getElementById("state");
      var citySelectObj = document.getElementById("city");

      countrySelectObj.add(new Option("--请选择--",""));
      stateSelectObj.add(new Option("--请选择--",""));
      citySelectObj.add(new Option("--请选择--",""));

      //读取xml文件 填充国际列表
      var xmlDoc = loadXML("LocList.xml");
      var xmlCountryNodes=xmlDoc.getElementsByTagName("CountryRegion");
      for(var i=0;i<xmlCountryNodes.length;i++){
        var xmlCountryName = xmlCountryNodes[i].getAttribute("Name");
        var xmlCountryCode = xmlCountryNodes[i].getAttribute("Code");
        countrySelectObj.add(new Option(xmlCountryName,xmlCountryCode));
      }


      //国家级别选择事件
      countrySelectObj.onchange=function(){
        //清空
        stateSelectObj.length=0;
        stateSelectObj.add(new Option("--请选择--",""));
        if(this.value!=""){
          for(var i=0;i<xmlCountryNodes.length;i++){
            //在xml中查找所有的State标签，看谁的Code属性和value值一样
            var xmlCountryCode = xmlCountryNodes[i].getAttribute("Code");
            if(this.value==xmlCountryCode){
              //调用该标签的getElementsByTagName,找到子标签。
              var xmlStateNodes = xmlCountryNodes[i].getElementsByTagName("State");
              //检查是否存在state
              var fStateNodeName=xmlStateNodes[0].getAttribute("Name");
              console.log(fStateNodeName);
              if(fStateNodeName == null)
              {
                stateSelectObj.length=0;
                stateSelectObj.add(new Option("--请选择城市--",""));
                //城市列表填充
                var xmlCityNodes = xmlStateNodes[0].getElementsByTagName("City");
                //清空city
                citySelectObj.length=0;
                for(var l=0;l<xmlCityNodes.length;l++)
                {
                  var xmlcityName=xmlCityNodes[l].getAttribute("Name");
                  var xmlcityCode=xmlCityNodes[l].getAttribute("Code");
                  citySelectObj.add(new Option(xmlcityName,xmlcityCode));
                }
              }
              else
              {
                for(var j=0;j<xmlStateNodes.length;j++){
                  var xmlStateName = xmlStateNodes[j].getAttribute("Name");
                  var xmlStateCode = xmlStateNodes[j].getAttribute("Code");
                  //添加城市html
                  stateSelectObj.add(new Option(xmlStateName,xmlStateCode));
                }
              }
              break;
            }

          }
        }
      }


      //给省份select注册onchange事件
      stateSelectObj.onchange=function(){
        //清空
        citySelectObj.length=0;
        citySelectObj.add(new Option("--请选择--",""));
        if(this.value!=""){
          for(var i=0;i<xmlCountryNodes.length;i++){
            //在xml中查找所有的State标签，看谁的Code属性和value值一样
            var xmlCountryCode = xmlCountryNodes[i].getAttribute("Code");
            if(countrySelectObj.value==xmlCountryCode){
              //调用该标签的getElementsByTagName,找到子标签。
              var xmlStateNodes = xmlCountryNodes[i].getElementsByTagName("State");
              for(var j=0;j<xmlStateNodes.length;j++){
                if(stateSelectObj.value==xmlStateNodes[j].getAttribute("Code")) {
                  var xmlCityNodes = xmlStateNodes[j].getElementsByTagName("City");
                  for(var k=0;k<xmlCityNodes.length;k++)
                  {
                    var xmlCityName = xmlCityNodes[k].getAttribute("Name");
                    var xmlCityCode = xmlCityNodes[k].getAttribute("Code");
                    //添加城市html
                    citySelectObj.add(new Option(xmlCityName,xmlCityCode));
                  }
                }
              }
              break;
            }
          }
        }
      }


      //如果需要市级选择县区级 同理 多一层 中国以外的县区级很少



    </script>

效果：

转载请注明谢谢