`

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>

 
  • 大小: 7.5 KB
4
0
分享到:
评论

相关推荐

    js+xml省市县三级联动实现【完成重构】

    在IT行业中,"js+xml省市县三级联动实现【完成重构】"是一个常见的前端开发任务,主要涉及JavaScript(js)和XML(eXtensible Markup Language)技术,用于创建具有交互性的省市县三级联动选择功能。这种功能常见于...

    php+ajax+mysql省市县三级联动(1张数据库).zip

    在IT行业中,开发一个能够实现省市县三级联动的系统是一项常见的需求,特别是在处理地理信息或者地址选择时。这个"php+ajax+mysql省市县三级联动"的资源提供了一个基于PHP、Ajax和MySQL实现的示例,它可以帮助初学者...

    jquery结合ajax和xml实现省市县三级联动

    综上所述,通过 jQuery 实现事件监听和 DOM 操作,使用 AJAX 进行异步数据请求,结合 XML 进行数据解析,我们可以高效地实现省市县三级联动的功能。这在现代 web 开发中是一个基础且实用的技能,能够提供流畅的用户...

    .net+xml+ajax.dll实现省市县三级联动无刷新代码例子

    这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信,以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说,这是一个很好的实践案例,有助于深入理解Web开发中的异步交互和...

    html + css + js 实现省市县三级联动

    通过以上步骤,我们就完成了HTML+CSS+JS实现省市县三级联动的基本框架。在实际项目中,可能还需要处理更多细节,如错误处理、数据加载优化、用户输入验证等。同时,为了提高用户体验,可以考虑使用现代前端框架(如...

    JS+XML 省市区三级联动完美版

    JS+XML 省市区三级联动完美版 划分到: 北京市-&gt;市辖区-&gt;东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区 北京市-&gt;县-&gt;密云县,延庆县

    JS+XML 省市区 三级联动下拉框

    这个"JS+XML 省市区 三级联动下拉框"的实现涉及到了前端开发的核心技能,包括JavaScript的事件处理、DOM操作以及XML的数据解析,对于学习和提升Web开发能力非常有帮助。同时,它也体现了前后端分离的思想,XML作为...

    Ajax+jQuery实现省市区三级联动功能

    在网页开发中,"Ajax+jQuery实现省市区三级联动功能"是一个常见的需求,尤其是在构建具有交互性和动态更新的用户界面时。这个功能的核心是通过Ajax技术异步获取数据,并使用jQuery库来处理DOM操作和事件监听,使得...

    ajax+xml实现省市区无刷新联动源码

    复制ajax 三级省市区联动xml 内的代码到你的项目中-&gt;在Class1.cs中 同时引用命名空间 using System.Xml; 同时在Page_Load()添加 Ajax.Utility.RegisterTypeForAjax(typeof(register));//register 为你页面的类文件名...

    JS解析XML实现省市县三级联动

    总的来说,"JS解析XML实现省市县三级联动"涉及了XML数据的加载与解析、DOM操作、事件监听及响应,这些都是JavaScript基础中的重要内容。理解并掌握这一技术,有助于开发者更好地实现动态交互的Web应用。

    asp+ajax获取省市区三级联动搜索

    在网页开发中,实现省市区三级联动搜索是一个常见的需求,特别是在用户填写地址或者选择服务区域时。本示例中,我们将探讨如何通过ASP(Active Server Pages)和AJAX(Asynchronous JavaScript and XML)技术实现这...

    struts2+dwr实现省市县三级联动

    在本项目“struts2+dwr实现省市县三级联动”中,主要目标是构建一个用户界面,当用户选择一个省份时,市和县的下拉列表会自动更新,展示与所选省份相关的城市和县。这种功能在许多需要地理位置信息的网站或系统中...

    java+Ajax实现省市地三级联动

    "java+Ajax实现省市地三级联动"就是一个典型的案例,它利用了Java、Ajax、JSON、Servlet和JavaScript等技术,来构建一个动态的下拉选择框,使得用户在选择省之后,市和地级行政区划会根据所选的省自动更新。...

    json+jquery+html省市县三级联动

    JSON(JavaScript Object...通过这样的方式,可以实现一个高效且用户体验良好的省市县三级联动效果。在提供的演示地址中,可以看到实际应用的示例。这种技术在现代Web开发中非常实用,能够提升用户在填写信息时的体验。

    jsp+servlet+ajax省市区三级联动

    在这个"jsp+servlet+ajax省市区三级联动"项目中,我们将探讨如何利用这三种技术协同工作来实现这一功能。 首先,JSP(JavaServer Pages)是一种动态网页技术,允许开发者在HTML代码中嵌入Java代码,以服务器端脚本...

    JS+xml省市县三级联动菜单,可以自动选择

    省、市、县三级联动 城市数据单独存在xml文件中,执行效率高。 初始化时可自动选择指定城市,示例: //初始化下拉菜单 InitCityList(); //自动选择默认地区 AutoSelect('福建省','龙岩市','新罗区'); &lt;/script&gt;

    Xml+JS省市县三级联动(兼容IE FF)

    "Xml+JS省市县三级联动(兼容IE FF)"就是一个这样的解决方案,它利用JavaScript(JS)语言处理XML文件,实现了在不同浏览器(如Internet Explorer和Firefox)中都可正常运行的联动效果。 XML(Extensible Markup ...

    基于xml数据的省市区三级联动

    本主题“基于xml数据的省市区三级联动”关注的是如何利用JavaScript和XML数据来实现这一功能。 XML(Extensible Markup Language)是一种用于存储和传输数据的格式,它结构清晰,易于解析,并且与平台和语言无关。...

    JS+XML 省市区三级联动 支持ie,firefox,Opera

    综上所述,"JS+XML 省市区三级联动 支持ie,firefox,Opera"这个项目旨在提供一个跨浏览器的解决方案,利用JavaScript和XML技术实现在网页上创建一个交互式的省市区选择器。这个方案不仅可以提高用户体验,还能适应...

    JS省市区三级联动htm+xml

    总的来说,“JS省市区三级联动.htm+xml”是一个结合了JavaScript、XML和HTML技术的解决方案,实现了动态的省市区选择功能。开发者可以根据自己的需求,如数据来源(可能是动态从服务器获取而非静态XML文件)、样式...

Global site tag (gtag.js) - Google Analytics