- 浏览: 464813 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
a1439226817:
能不能发下源码1439226817@qq.com
ExtJsCRUD组件实现 -
w923690968:
[list][*]引用[u][/u][/list]
[JS]Drag And Drop -
zhumingyuan:
您好!用的的是3.2.3版本,按照您的方法配置了一下,但是还是 ...
spring vmc3.1.1 下,通过AnnotationMethodHandlerAdapter配置webBindingInitializer失效解决方案 -
sumo084:
我把xDarkness-MultClrBubble-1.0.j ...
JAVA实现类泡泡屏保效果 -
sumo084:
求源码,楼主好人,630483738@qq.com,谢谢
JAVA实现类泡泡屏保效果
支持默认值设置哦
使用:
/** * * @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>
发表评论
-
google浏览器书签账号登陆不上解决方案
2011-10-10 09:22 760问题: 最近google浏览器书签同步账号登陆不上 ... -
Dom多事件注册
2010-12-15 15:28 1169今天看到这样一段代码,如下: Page.clickFunc ... -
excanvas饼图实现
2010-10-21 15:04 2815代码比较简单,需要注意的一点就是: 如果想让饼图的边框显示出来 ... -
DOM中cloneNode的使用之旅
2010-10-21 14:52 2513struts2中可以自动封装表单提交过来的参数 List< ... -
Tab键控制页面中元素获取焦点顺序
2010-08-19 17:35 4086修改默认Tab键按键触发,界面元素获取焦点的顺序 此方法 ... -
JS-自动提示组件
2010-08-19 17:23 1766注:源自Ajax实战 实现自动提示功能: <!DOCT ... -
js实现在图片上画矩形框
2010-08-18 16:10 10816JS组件: @author Darkness @versio ... -
JS控制输入字符长度
2009-11-09 10:50 5540<script language="Jav ... -
internet explorer 无法打开 Internet站点 已中止操作
2009-09-26 18:20 2144JavaScript使IE的经典异常 代码 http://ww ... -
fusioncharts相关问题
2009-09-26 15:59 1756中文问题 使用UTF-8 or GBK,X 轴正常, ... -
js日期时间函数
2009-09-20 17:28 1174Date.prototype.isLeapYear 判断闰 ... -
IE6 png 透明 (三种解决方法)
2009-09-14 14:49 2022FF和IE7已经直接支持透明的png图了,下面这个主要是解决I ... -
类似MSN的消息提示
2009-08-18 11:00 958<html> <head> ... -
IE6的“错误:53 存储空间不足,无法完成此操作”解决方法
2009-08-07 21:10 7978一法: 打开注册表, ... -
表格边框的隐藏
2009-08-07 09:19 2604代码如下: <html> <he ... -
JS操作VML
2009-08-03 14:52 2785可以用鼠标拖动这条线,效果如图: 说明:还有一些bug, ... -
javascript技巧大全 (3)
2009-03-06 12:36 1110... -
javascript技巧大全(2)
2009-03-06 12:33 1310进入页面<meta http-equiv="P ... -
javascript技巧大全(1)
2009-03-06 12:32 1161事件源对象 event.srcElement.tagName ... -
javascript性能优化
2009-02-27 10:56 4346很久就想总结一下关于javascript性能优化方面的一些东西 ...
相关推荐
在IT行业中,"js+xml省市县三级联动实现【完成重构】"是一个常见的前端开发任务,主要涉及JavaScript(js)和XML(eXtensible Markup Language)技术,用于创建具有交互性的省市县三级联动选择功能。这种功能常见于...
在IT行业中,开发一个能够实现省市县三级联动的系统是一项常见的需求,特别是在处理地理信息或者地址选择时。这个"php+ajax+mysql省市县三级联动"的资源提供了一个基于PHP、Ajax和MySQL实现的示例,它可以帮助初学者...
综上所述,通过 jQuery 实现事件监听和 DOM 操作,使用 AJAX 进行异步数据请求,结合 XML 进行数据解析,我们可以高效地实现省市县三级联动的功能。这在现代 web 开发中是一个基础且实用的技能,能够提供流畅的用户...
这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信,以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说,这是一个很好的实践案例,有助于深入理解Web开发中的异步交互和...
通过以上步骤,我们就完成了HTML+CSS+JS实现省市县三级联动的基本框架。在实际项目中,可能还需要处理更多细节,如错误处理、数据加载优化、用户输入验证等。同时,为了提高用户体验,可以考虑使用现代前端框架(如...
JS+XML 省市区三级联动完美版 划分到: 北京市->市辖区->东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区 北京市->县->密云县,延庆县
这个"JS+XML 省市区 三级联动下拉框"的实现涉及到了前端开发的核心技能,包括JavaScript的事件处理、DOM操作以及XML的数据解析,对于学习和提升Web开发能力非常有帮助。同时,它也体现了前后端分离的思想,XML作为...
在网页开发中,"Ajax+jQuery实现省市区三级联动功能"是一个常见的需求,尤其是在构建具有交互性和动态更新的用户界面时。这个功能的核心是通过Ajax技术异步获取数据,并使用jQuery库来处理DOM操作和事件监听,使得...
复制ajax 三级省市区联动xml 内的代码到你的项目中->在Class1.cs中 同时引用命名空间 using System.Xml; 同时在Page_Load()添加 Ajax.Utility.RegisterTypeForAjax(typeof(register));//register 为你页面的类文件名...
总的来说,"JS解析XML实现省市县三级联动"涉及了XML数据的加载与解析、DOM操作、事件监听及响应,这些都是JavaScript基础中的重要内容。理解并掌握这一技术,有助于开发者更好地实现动态交互的Web应用。
在网页开发中,实现省市区三级联动搜索是一个常见的需求,特别是在用户填写地址或者选择服务区域时。本示例中,我们将探讨如何通过ASP(Active Server Pages)和AJAX(Asynchronous JavaScript and XML)技术实现这...
在本项目“struts2+dwr实现省市县三级联动”中,主要目标是构建一个用户界面,当用户选择一个省份时,市和县的下拉列表会自动更新,展示与所选省份相关的城市和县。这种功能在许多需要地理位置信息的网站或系统中...
"java+Ajax实现省市地三级联动"就是一个典型的案例,它利用了Java、Ajax、JSON、Servlet和JavaScript等技术,来构建一个动态的下拉选择框,使得用户在选择省之后,市和地级行政区划会根据所选的省自动更新。...
JSON(JavaScript Object...通过这样的方式,可以实现一个高效且用户体验良好的省市县三级联动效果。在提供的演示地址中,可以看到实际应用的示例。这种技术在现代Web开发中非常实用,能够提升用户在填写信息时的体验。
在这个"jsp+servlet+ajax省市区三级联动"项目中,我们将探讨如何利用这三种技术协同工作来实现这一功能。 首先,JSP(JavaServer Pages)是一种动态网页技术,允许开发者在HTML代码中嵌入Java代码,以服务器端脚本...
省、市、县三级联动 城市数据单独存在xml文件中,执行效率高。 初始化时可自动选择指定城市,示例: //初始化下拉菜单 InitCityList(); //自动选择默认地区 AutoSelect('福建省','龙岩市','新罗区'); </script>
"Xml+JS省市县三级联动(兼容IE FF)"就是一个这样的解决方案,它利用JavaScript(JS)语言处理XML文件,实现了在不同浏览器(如Internet Explorer和Firefox)中都可正常运行的联动效果。 XML(Extensible Markup ...
本主题“基于xml数据的省市区三级联动”关注的是如何利用JavaScript和XML数据来实现这一功能。 XML(Extensible Markup Language)是一种用于存储和传输数据的格式,它结构清晰,易于解析,并且与平台和语言无关。...
综上所述,"JS+XML 省市区三级联动 支持ie,firefox,Opera"这个项目旨在提供一个跨浏览器的解决方案,利用JavaScript和XML技术实现在网页上创建一个交互式的省市区选择器。这个方案不仅可以提高用户体验,还能适应...
总的来说,“JS省市区三级联动.htm+xml”是一个结合了JavaScript、XML和HTML技术的解决方案,实现了动态的省市区选择功能。开发者可以根据自己的需求,如数据来源(可能是动态从服务器获取而非静态XML文件)、样式...