js+xml实现省市县三级联动

支持默认值设置哦

/**
 *
 * @author Darkness
 * Email: darkness_sky@qq.com
 * QQ: 893951837
 */
var Darkness = new Object();

Darkness.ProvinceCityCountry = function(){
}

Darkness.ProvinceCityCountry.prototype = {
    strDefaultProvince: '江苏省',
    strDefaultCity: '南京市',
    strDefaultCountry: '白下区',
    xmlDoc: null,
    ddlProvince: null,
    ddlCity: null,
    ddlCountry: null,

    /** 构造器，不知道在new的时候为什么不执行，郁闷...*/
    constructor: function(config) {
        //首先需要初始化
        this.getXmlDoc("Area.xml");

        var strProvinceId = config.ddlProvinceId || "provinceId";
        var strCityId = config.ddlCityId || "cityId";
        var strCountryId = config.ddlCountryId || "countryId";

        this.ddlProvince = document.getElementById(strProvinceId);
        this.ddlCity = document.getElementById(strCityId);
        this.ddlCountry = document.getElementById(strCountryId);

        // 该绑定事件失败 
        // this.bindOnChangeEvent(this);

        this.strDefaultProvince = config.province || this.strDefaultProvince;
        this.strDefaultCity = config.city || this.strDefaultCity;
        this.strDefaultCountry = config.country || this.strDefaultCountry;
    },

    /** 本想在这儿绑定onchange事件(就省掉在控件中加上 
        onchange="objProvinceCityCountry.onSelectCity();"了)的，
        因为实际调用的时候this指向激活该事件的控件，
        而非Darkness.ProvinceCityCountry的实例，所以该绑定总是失败
        （onSelectCity方法中的this总是指向激活该事件的控件），不知道
        有没有什么好的解决办法...
    bindOnChangeEvent: function(_instence){
         // onchange="objProvinceCityCountry.onSelectCity();"
        // onchange="objProvinceCityCountry.onSelectCountry();"
        this.ddlProvince.onchange = _instence.onSelectCity;
        this.ddlProvince.onchange = _instence.onSelectCountry;
    },*/

    /** 初始化方法，还得手动调用constructor。记得在new的时候constructor应该
       是自动执行的，不知道在这儿怎么不行了*/
    init: function (config){
        this.constructor(config);

        var  m_TopnodeList= this.getNodeByXPath('address').childNodes;

        //省份列表
        this.setSelectOptions(this.ddlProvince,m_TopnodeList);
        this.selectCity(this.strDefaultProvince);
        this.selectCountry(this.strDefaultCity);
     },


    /** 打开xlmdocm文档 */
    getXmlDoc: function (xmlFilePath){
      this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      this.xmlDoc.async = false;
      this.xmlDoc.load(xmlFilePath);
      if(this.xmlDoc.parseError.errorCode!=0){   
          var myErr = this.xmlDoc.parseError;
          alert("解析xml出错！" + myErr.reason);
      }
    },

    /** 根据XPath获取一个Node */
    getNodeByXPath: function (strXPath) {
        return this.xmlDoc.selectSingleNode(strXPath);
    },

    /** 设置childNodes到一个select对象中 */
    setSelectOptions: function(objSelect,childNodes) {
        var m_ChildNodes = childNodes;

        this.removeDropDownList(objSelect);

        for(var i = 0; i < m_ChildNodes.length; i++){
          var childNode = m_ChildNodes[i];
          var eOption = document.createElement("option");
          eOption.value = childNode.getAttribute("name");
          eOption.text = childNode.getAttribute("name");
          objSelect.add(eOption);

          if(  (eOption.value == this.strDefaultProvince)
            || (eOption.value == this.strDefaultCity)
            || (eOption.value == this.strDefaultCountry)){
            eOption.selected = 'selected';
          }
       }
    },

    /** 选择城市事件 */
    onSelectCity: function () {
        this.selectCity(this.ddlProvince.options[this.ddlProvince.selectedIndex].value);
    },

    /** 选择县区事件 */
    onSelectCountry: function () {
        this.selectCountry(this.ddlCity.options[this.ddlCity.selectedIndex].value);
    },

    /** 根据省查询城市 */
    selectCity: function (provinceName){
      var provinceNode = this.getNodeByXPath('//address/province [@name="' + provinceName + '"]');   

      if(provinceNode.childNodes.length > 0){
           //填充城市
           this.setSelectOptions(this.ddlCity,provinceNode.childNodes);

           if(provinceNode.childNodes[0].childNodes.length>0){
              //填充选择省份的第一个城市的县列表
              this.setSelectOptions(this.ddlCountry,provinceNode.childNodes[0].childNodes);
           }
      }
    },

    /** 根据城市查询县区 */
    selectCountry: function (cityName){   
         var cityNode = this.getNodeByXPath('//address/province/city[@name="'+cityName+'"]');   

         this.setSelectOptions(this.ddlCountry,cityNode.childNodes);
    },

    /** 移除select下的所有options */
    removeDropDownList: function (obj){   
        if(obj){
            var len = obj.options.length;   
              if(len>0){
                for(var i=len;i>=0;i--){
                   obj.remove(i);   
                }
            }
         }
    }
}

使用：

<html>
<head runat="server">
    <title>js + xml 省市县三级联动</title>
            <script   language="javascript"   type="text/javascript" src="Area.js">
  </script>  
   <script language="javascript" type="text/javascript">
         var objProvinceCityCountry = null;
         function OnInit(){
			objProvinceCityCountry = new Darkness.ProvinceCityCountry();
			// 初始化方法，必须传入省市县ddl控件的id，
			// 否则默认为provinceId、cityId、countryId
			// province默认值:江苏省,city默认值:南京市,country默认值:白下区
			objProvinceCityCountry.init({
				ddlProvinceId: 'strProvinceId1',
				ddlCityId: 'strCityId1',
				ddlCountryId: 'strCountryId1',
				province: document.getElementById('defaultProvince1').value,
				city: document.getElementById('defaultCity1').value,
				country: document.getElementById('defaultCountry1').value
			});
         }
    </script>
</head>
<body onload="OnInit();">
    <form id="form1" runat="server">
    <div>
    <select id="strProvinceId1" name="province" runat="server" onchange="objProvinceCityCountry.onSelectCity();">
		 <option value="" selected="selected">省/直辖市</option>
	</select>
    <select id="strCityId1" name="city" runat="server" onchange="objProvinceCityCountry.onSelectCountry();">
		<option value="" selected="selected">请选择</option>
	</select>
    <select id="strCountryId1" name="country" runat="server" >
		<option value="" selected="selected">请选择</option>
	</select>
    </div>

    <input type="text" id="defaultProvince1" value=""/>
    <input type="text" id="defaultCity1" value=""/>
    <input type="text" id="defaultCountry1" value=""/>

    <input type="button" value="设置默认值" onclick="javascript:OnInit();"/>

    </form>
</body>
</html>